在CSS中创建甜甜圈形状_Css_Css Shapes

在CSS中创建甜甜圈形状

css

在CSS中创建甜甜圈形状,css,css-shapes,Css,Css Shapes,我知道如何创建具有边框半径等的css圆，但我对创建一个仅css的甜甜圈形状感兴趣，大致类似于这里的-> 它将是一个div，但会弯曲回自身有什么想法吗？？？ <div class="doughnut"></div> .doughnut { border: 50px solid #f00; border-radius: 100px; height:100px; width:100px; } 甜甜圈{ 边框：50px实心#f00；边界

我知道如何创建具有边框半径等的css圆，但我对创建一个仅css的甜甜圈形状感兴趣，大致类似于这里的->

它将是一个div，但会弯曲回自身

有什么想法吗？？？


<div class="doughnut"></div>


.doughnut { 
    border: 50px solid #f00;
    border-radius: 100px;
    height:100px;
    width:100px;
}

甜甜圈{
边框：50px实心#f00；
边界半径：100px；
高度：100px；
宽度：100px；
}

只需将边界半径设置为div宽度的50%：

第四种颜色是关闭的，但这是简单的，因为它有一些向后兼容性。如果需要，可以在以后回答任何问题

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>CSS Donut</title>
<style>
#div1
{
 background-color: #f00;
 border: #f0f solid 1px;
 height: 100px;
 width: 100px;
 border-radius: 50px;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
}
#div2
{
 background-color: #0f0;
 border: #f0f solid 1px;
 height: 60px;
 margin: 20px 0px 0px 20px;
 width: 60px;
 border-radius: 30px;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
}
</style>
</head>

<body>
<div id="div1"><div id="div2">&#160;</div></div>

</body>
</html>


CSS甜甜圈
#第一组
{
背景色：#f00；
边框：#f0f实心1px；
高度：100px；
宽度：100px；
边界半径：50px；
-webkit边界半径：50px；
-moz边界半径：50px；
}
#第二组
{
背景色：#0f0；
边框：#f0f实心1px；
高度：60px；
保证金：20px 0px 0px 20px；
宽度：60px；
边界半径：30px；
-webkit边界半径：30px；
-moz边界半径：30px；
}

也可以使用css3绘制此形状：

正文{
背景：线性梯度（橙色、红色）无重复；
最小高度：100vh；
保证金：0；
}
div{
背景：径向梯度（圆形，透明40%，紫色40%）；
边界半径：100%；
高度：300px；
宽度：300px；
利润率：25px；
}

我不认为只使用一个div是可能的。现在两个div是不同的情况…@FakeRainBrigand如果您使用：after，就像大多数css形状一样，则肯定可能使用一个div。：）@约瑟夫，我很期待见到你！或者像这样。。。不完全是一个div向自身弯曲，但a=这是单向的：P仅在chrome中测试，显然必须在兼容css3的浏览器中查看。演示：太棒了，让DOM保持不变，这在处理数百个元素时肯定会破坏交易。

div{width:200px; height:200px; border:1px solid black; position:relative; border-radius:200px;}
div:before{content:''; width:50px; height:50px; display:block; position:absolute; top:75px; left:75px; border:1px solid black; border-radius:200px;}

div {
  background: radial-gradient(circle, transparent 40%, purple 40%);
}