Tag: css shapes

CSS进度圈: 我已经search了这个网站find进度条，但我已经能够find显示animation圈子，完全100％。我希望它停止在如下面的截图中的某些百分比。有没有什么办法可以做到这一点只使用CSS？

加长的六angular形button只使用一个元素: 我想用CSS创build一个像这样的button，而不使用其他元素。 button图像由于button有一个border ，我想我通常都需要:before和:after元素在一边创build一个箭头。所以要在每一边制作一个箭头，我需要链接中的另一个span元素。我试过的第二种方法是你在下面看到的。但是采用这种解决scheme，它们没有正确居中，箭头的每一边的长度都不相同。有人有一个解决scheme？ /* General Button Style */ .button { display: block; position: relative; background: #fff; width: 300px; height: 80px; line-height: 80px; text-align: center; font-size: 20px; text-decoration: none; text-transform: uppercase; color: #e04e5e; margin: 40px auto; font-family: Helvetica, Arial, sans-serif; box-sizing: border-box; } /* Button Border Style */ .button.border { border: […]

使用CSS剪切angular落: 我正在寻找“削减”一个div的左上angular，就好像你已经把页面的一angular折起来一样。我想在纯CSS中做，有没有什么方法？

透明的半圆切出一个div: 我只想用CSS3做一个透明的半圆形切割。唯一的要求是形成形状的所有元素必须是黑色或透明的。我不能用一个白色圆圈的黑色矩形，因为半圆要透明，让背景透明。所需形状：

透明文本剪出背景: 有什么办法让一个透明的文字切出一个背景效果，像下面的图片，使用CSS？因为图片replace文字而失去所有珍贵的search引擎优化服务将会很难过。我首先想到了阴影，但是我什么也找不出来… 图片是网站背景，绝对定位的<img>标签

带有箭头的讲话泡泡: 我有一个项目，我需要插入语音泡沫/消息框。我试图达到的一般形状是这样的： .bubble { height: 100px; width: 200px; border: 3px solid gray; background: lightgray; position: relative; cursor:pointer; } .triangle { width: 0; border-top: 20px solid black; border-left: 20px solid transparent; border-right: 20px solid transparent; cursor:pointer; } <div class="bubble">Speech bubble </div> <div class="triangle"> </div> 由于透明边框也是可点击的，因此目前不能通过命中testing。目标点击框（可点击/可平放的区域）需要坚持形状的边界（这里的透明边框也是可以放置的，使之无效）。我需要显示形状在各种内容（图像，gradents，文字…），问题我在操作这个形状时遇到的主要问题是：能够根据指向元素的位置（上/左/右/下侧）移动气泡周围的三angular形，当需要强调时，在其周围添加边框或框阴影有没有解决这些问题？

透明的箭头/三angular形: 我想在图像上做一个透明的箭头。这个三angular形应该在一个块中缩进并显示背景图像。期望的输出： CSS： .barShow { background-color: #000; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } .barShow:before { top: 0%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: #999; border-width: 20px; margin-left: -20px; } 透明的CSS箭头应该是透明的，没有颜色。

标题之前和之后的图像: 我想在中心标题之前和之后创build一行。该行和文本必须具有透明背景，才能将其放置在不平坦的背景上。该行不能是100％的宽度，如下所示：标题的文字可能会改变：标题宽度未知标题可以跨越几行 h1 { text-align: center; border-bottom: 1px solid #000; } <h1>Today</h1>

CSS三angular形如何工作？: 在CSS技巧中有很多不同的CSS形状- CSS的形状，我特别困惑于一个三angular形： #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> 如何和为什么它的工作？