标签: css-shapes

尝试为我的css三角形(边框)使用自定义十六进制颜色.但是,由于它使用边框属性,我不确定如何去做.我想简单地因为兼容性而避开javascript和css3.我试图让三角形有一个带有1px边框的白色背景(围绕三角形的边角),颜色为#CAD5E0.这可能吗？这是我到目前为止所拥有的:

.container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.container:after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: 100%;
    width: 0;
    height: 0;
    border-color: transparent transparent transparent #CAD5E0;
    border-style: solid;
    border-width: 10px;
}?

我的小提琴:http://jsfiddle.net/4ZeCz/

你如何使用HTML5和CSS3绘制圆圈？

是否也可以将文字放入？

如果我对border-radius 使用像素或em值,则边缘半径始终为圆弧或药丸形状,即使该值大于元素的最大边.

当我使用百分比时,边缘半径是椭圆形的,从元素每边的中间开始,形成椭圆形或椭圆形:

border-radius的像素值:

div {
   background: teal;
   border-radius: 999px;
   width: 230px;
   height: 100px;
   padding: 40px 10px;
   box-sizing: border-box;
   font-family: courier;
   color: #fff;
 }

<div>border-radius:999px;</div>

border-radius的百分比值:

div {
  background: teal;
  border-radius: 50%;
  width: 230px;
  height: 100px;
  padding:40px 10px;
  box-sizing:border-box;
  font-family:courier;
  color:#fff;
}

<div>border-radius:50%;</div>

为什么边界半径百分比的作用方式与使用像素值或em值设置的border-radius的作用方式相同？

好的,所以每个人都知道你可以用这个做三角形:

#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

这产生了一个坚实的,填充三角形.但是你会怎么做一个类似于空心的箭头状三角形呢？

我搜索了这个网站以查找进度条,但我能够找到的显示动画圆圈,完全100%.

我希望它停在某些百分比,如下面的屏幕截图所示.有没有办法只使用CSS才能做到这一点？

我刚刚遇到了一个巧妙的CSS技巧.看看小提琴......

.tooltiptail {
  display: block;
  border-color: #ffffff #a0c7ff #ffffff #ffffff;
  border-style: solid;
  border-width: 20px;
  width: 0px;
  height: 0px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

这会产生一个小箭头/三角形效果,一个"工具提示尾巴".这让我大吃一惊!我真的很想知道它是如何工作的？!

此外,有没有办法扩展这个CSS技巧来创建一个效果,如下所示:

这是一个有趣的问题.这可以仅使用CSS来完成,暂时忽略阴影吗？

更新1

我想出了我最初问题的解决方案.这是小提琴......

http://jsfiddle.net/duZAx/7/

HTML

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>

CSS

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff …

是否有任何方法可以使用CSS从下图中的背景效果中剪切出透明文本？
因为图像替换文本而失去所有宝贵的SEO会很难过.

我首先想到阴影,但我无法想出任何事情......

图像是站点背景,是绝对定位的<img>标记

我试图创建一个如下图所示的形状,仅在一侧(例如,底侧)具有倾斜边缘,而其他边缘保持笔直.

我尝试使用border方法(代码如下),但我的形状的尺寸是动态的,因此我不能使用这种方法.

.shape {
    position: relative;
    height: 100px;
    width: 200px;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    height: 0px;
    width: 0px;
    left: 0px;
    bottom: -100px;
    border-width: 50px 100px;
    border-style: solid;
    border-color: tomato tomato transparent transparent;
}

<div class="shape">
    Some content
</div>

我也尝试使用渐变作为背景(如下面的代码所示),但随着尺寸的变化,它会变得混乱.你可以通过悬停在下面代码片段中的形状来看到我的意思.

.gradient {
  display: inline-block;
  vertical-align: top;
  height: 200px;
  width: 100px;
  margin: 10px;
  color: beige;
  transition: all 1s;
  padding: 10px;
  background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;
}
.gradient:hover {
  width: 200px;
} …

因此,我需要使用CSS制作重复的六边形图案.如果需要图像,我可以去那里,但我更愿意尽可能使用CSS.

以下是我想要创建的内容:

基本上,我只需要一种方法来创建六边形形状,然后在它们上面叠加文本/图像.我还没有太多代码,因为我不确定从哪里开始.问题是,我可以使用<div>六角形的形状,如(http://css-tricks.com/examples/ShapesOfCSS/)所示,但它们不会连接.我可以使用重复的六边形图案,但后来我无法指定特定形状所需的文本或图像的确切位置.在此先感谢您的帮助.

我正在尝试创建Apple的OS X圈加载动画.

到目前为止我尝试了什么:

.animation-wrapper {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  filter: brightness(0.8);
  -webkit-filter: brightness(0.8);
}
.pie-piece1 {
  position: absolute;
  width: 50%;
  height: 50%;
  bottom: 0;
  left: 0;
  background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 100%);
}
.pie-piece2 {
  position: absolute;
  width: 50%;
  height: 50%;
  bottom: 0;
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
}
.pie-piece3 {
  position: absolute; …