Tag: css shapes

中心三angular在底部: 我试图在我的英雄底部有一个三angular形/箭头，但它不响应，并且不能很好地在移动上工作，因为三angular形漂浮在右边，不再是绝对中心。我怎样才能让三angular形始终位于div底部的绝对中心？示例代码在这里： http://jsfiddle.net/SxKr5/1/ HTML： <div class="hero"></div> CSS： .hero { position:relative; background-color:#e15915; height:320px !important; width:100% !important; } .hero:after, .hero:after { z-index: -1; position: absolute; top: 98.1%; left: 70%; margin-left: -25%; content: ''; width: 0; height: 0; border-top: solid 50px #e15915; border-left: solid 50px transparent; border-right: solid 50px transparent; }

CSS 3形状：“反转圆”或“剪出圆”: 我想创build一个形状，我将其描述为“逆圆”：图像是不准确的，因为黑线应该继续div元素的外边界。这里是我现在的一个演示： http : //jsfiddle.net/n9fTF/ 甚至有可能没有图像的CSS ？

透明空心或切出圈: 是否有可能只使用CSS 切出一个空心圆？这个我们都可以做：但是我们能做到吗？圆圈必须是中空的和透明的。因此这个问题并没有通过在div一个纯色圆来解决。

如何倾斜元素，但保持文本正常（未纠正）: 是否有可能只使用CSS重现此图像？我想将其应用于我的菜单，所以在hover实例上出现棕色背景我不知道该怎么做，我只有; .menu li a:hover{ display:block; background:#1a0000; padding:6px 4px; }

如何随机锯齿得到撕纸效果？: 我正在试图制作一个像下面的图片一样的撕纸效果：与底部的撕裂的效果。我看到了这一点，并能够做出如下所示的撕纸效果 .box { width: 300px; height: 150px; background: darkred; position: relative; display: inline-block; } .box:after { position: absolute; content: ""; width: 15px; height: 15px; transform: rotate(45deg); transform-origin: 0% 100%; background: darkred; left: 0; bottom: 0; box-shadow: 15px -15px 0 0 darkred, 30px -30px 0 0 darkred, 45px -45px 0 0 darkred, 60px […]

有没有可能用CSS创build这个形状（两个部分圆形连接在一起）？: 我试图用CSS来完成两个div的边界：我尝试使用border-radius ，但两个部分圆不会压在一起： http : //jsfiddle.net/uwz6L79w/ .left { position: absolute; left: 0; top: 0; width: 100px; height: 100px; border-width: 4px; border-color: black white black black; border-style: solid; border-radius: 60px } .right { position: absolute; left: 104px; top: 0; width: 100px; height: 100px; border-width: 4px; border-color: black black black white; border-style: solid; border-radius: 60px; } <div […]

如何用CSS分割不同颜色的圆: 我希望能够用另一种颜色的线段绘制一个圆，我希望覆盖的部分的数量能够从0%到100%以10%增量增加。 Google上的所有示例都不是细分市场。到目前为止，这是我所能想到的最好的： div.outerClass { position: absolute; left: 10px; top: 10px; height: 2.5px; overflow: hidden; -ms-transform: rotate(270deg); /* IE 9 */ -webkit-transform: rotate(270deg); /* Chrome, Safari, Opera */ transform: rotate(270deg); } div.innerClass { width: 10px; height: 10px; border: 5px solid green; border-radius: 36px; } <div class="outerClass"> <div class="innerClass"></div> </div> 0% ， 50%和100%我都可以。

带有阴影的CSS语音泡沫: 创build一个使用CSS在左侧绘制三angular形的DIV。试图对父类和伪元素（见图像）和代码应用统一的盒子阴影。这可能吗？还是我最好使用边界图像呢？（上：阴影前，中间：CSS盒阴影，下：理想结果） .bubble{ height: 200px; width: 275px; opacity: 0; margin-top: 41px; float: right; background-color: #F2F2F2; -webkit-border-radius: 5px; -webkit-box-shadow: 0px 0px 6px #B2B2B2; } .bubble::after { height: 0px; width: 0px; content: "\00a0"; display: block; margin-left: -10px; margin-top: 28px; border-width: 10px 10px 10px 0; border-style: solid; border-color: transparent #F2F2F2 transparent transparent; -webkit-box-shadow: 0px 0px […]

如何使一个光滑的虚线边框旋转animation，如“行军ant”: 我正在使用“齿轮和链”的cssanimation，但无法创build“平滑”的边框旋转序列。你可以看到这个小提琴如何（当前）我正在使用一个伪元素来产生“旋转”的效果。这是通过在白色虚线和虚线金色边框之间“切换”来完成的，使得它看起来像是“边框正在旋转”。我拥有的 #one{ -webkit-animation: rotateClockwiseAnimation 5s linear infinite; /* Safari 4+ */ -moz-animation: rotateClockwiseAnimation 5s linear infinite; /* Fx 5+ */ -o-animation: rotateClockwiseAnimation 5s linear infinite; /* Opera 12+ */ animation: rotateClockwiseAnimation 5s linear infinite; /* IE 10+, Fx 29+ */ } #two{ -webkit-animation: rotateAntiClockwiseAnimation 5s linear infinite; /* Safari 4+ */ -moz-animation: […]

如何在CSS中绘制一个圆圈？: 那么，用纯CSS绘制一个圆圈很容易。 .circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } 我如何画一个部门？给定X度[0-360]我想画一个X度的部分。我可以用纯CSS做到这一点吗？例如：谢谢+例子谢谢乔纳森，我用了第一种方法。如果这有助于某人获得百分比并绘制一个扇区的JQuery函数的示例。该部门在百分比圆圈后面，这个例子展示了如何从一个起点开始围绕一个圆弧来实现一个圆弧。 $(function drawSector() { var activeBorder = $("#activeBorder"); var prec = activeBorder.children().children().text(); if (prec > 100) prec = 100; var deg = prec * 3.6; if (deg <= 180) { activeBorder.css('background-image', 'linear-gradient(' […]