20

境界線の半径などでcssの円​​を作成する方法は知っていますが、ここで大まかにこのようなcssのみのドーナツの形を作成することに興味があります->ここに画像の説明を入力してください

それは1divになりますが、それ自体に向かって丸く湾曲します。

何か案は？？

4

5 に答える 5

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


.doughnut { 
    border: 50px solid #f00;
    border-radius: 100px;
    height:100px;
    width:100px;
}
于 2011-12-12T01:19:19.007 に答える
5

この形はcss3で描くこともできますradial-gradient()：

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


body {
  background: linear-gradient(orange, red) no-repeat;
  min-height: 100vh;
  margin: 0;
}

div {
  background: radial-gradient(circle, transparent 40%, purple 40%);
  border-radius: 100%;
  height: 300px;
  width: 300px;
  margin: 25px;
}
<div></div>

于 2016-12-23T10:04:51.223 に答える
4

デモ

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;}
于 2011-12-12T01:23:21.527 に答える
0

境界線の半径をdiv幅の50％に設定するだけです。

作業サンプル

于 2011-12-12T01:21:15.777 に答える
0

この色はオフですが、これは下位互換性があるのと同じくらい簡単です。必要に応じて、後で質問に答えることができます。

<?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>
于 2011-12-12T01:21:57.863 に答える