Създайте форма на поничка в CSS

Знам как да създам css кръг с радиус на границата и т.н., но се интересувам от създаването само на css форма на поничка, приблизително като тази тук -> въведете описание на изображението тук

Ще бъде един div, но извит назад към себе си,

някакви идеи??


css css-shapes
person benhowdle89    schedule 12.12.2011    source източник
comment
Не мисля, че е възможно само с един div. Сега две divs е различна история...   -  person Brigand    schedule 12.12.2011
comment
@FakeRainBrigand определено вероятно е с един div, ако използвате :after като повечето css форми. :)   -  person Joseph Marikle    schedule 12.12.2011
comment
@Joseph, очаквам с нетърпение да го видя!   -  person Brigand    schedule 12.12.2011
comment
или така... не точно div, извит обратно върху себе си, но a=това е един начин. :P Тествано само в chrome и очевидно трябва да се гледа в браузър, съвместим с css3. jsfiddle.net/VJtnA   -  person Joseph Marikle    schedule 12.12.2011

Отговори (5)


arrow_upward
5
arrow_downward

Тази форма може да бъде начертана и с 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>

person Mohammad Usman    schedule 23.12.2016
comment
Брилянтно, оставя DOM непроменен, което определено може да наруши сделката, когато работите със стотици елементи. - person Bil5; 29.04.2021

arrow_upward
4
arrow_downward

Демо

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;}
person bookcasey    schedule 12.12.2011

arrow_upward
0
arrow_downward

Просто задайте радиуса на границата на 50% от ширината на div:

Работна проба

person Scott    schedule 12.12.2011

arrow_upward
0
arrow_downward

Цветовете са изключени, но това е толкова просто, колкото може с известна обратна съвместимост. Може да отговори на всички въпроси по-късно, ако е необходимо.

<?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>
person John    schedule 12.12.2011

arrow_upward

arrow_downward

person    schedule
comment
Демонстрация: jsfiddle.net/CevXD - person Jared Farrish; 12.12.2011