Я знаю, как создать круг css с радиусом границы и т.д., но я заинтересован в создании css только формы пончика примерно так же, как здесь, →
Это был бы один div, но изогнутый круглый назад на себя,
любые идеи
Я знаю, как создать круг css с радиусом границы и т.д., но я заинтересован в создании css только формы пончика примерно так же, как здесь, →
Это был бы один div, но изогнутый круглый назад на себя,
любые идеи
<div class="doughnut"></div>
.doughnut {
border: 50px solid #f00;
border-radius: 100px;
height:100px;
width:100px;
}
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;}
Просто установите радиус границы до 50% от ширины div:
Th цвета выключены, но это так же просто, как и с некоторой обратной совместимостью. В случае необходимости ответьте на любые вопросы.
<?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"> </div></div>
</body>
</html>
Эта фигура также может быть нарисована 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>