Круг / Пончик с отрезанным куском
Как я могу сделать изображение, подобное изображенному ниже, с использованием чистого CSS или холста? Мне нужно, чтобы он имел прозрачный фон; можешь помочь мне в этом?
3 ответа
Нечто подобное может сделать это для вас (возможно, после некоторой обработки):
html,body{background:black;}
.nut{
height:200px;
width:200px;
border-radius:50%;
position:relative;
background-color:lightblue;
}
.nut:before{
position:absolute;
content:"";
height:40%;
width:40%;
background-color:black;
left:30%;
top:30%;
border-radius:50%;
}
.nut:after{
position:absolute;
content:"";
height:40%;
width:40%;
background-color:lightblue;
right:-5%;
bottom:-5%;
border-radius: 0 0 100% 0;
border-left:5px solid black;
border-top:5px solid black;
}<div class="nut"></div>Что касается прозрачного фона, вы можете проиллюстрировать это чем-то вроде:
div {
border-radius: 50%;
height: 50px;
width: 50px;
border: 50px solid blue;
position: relative;
border-bottom-color: transparent;
transform: rotate(-45deg);
margin: 20px auto;
}
div:after {
content: "";
position: absolute;
top: -50px;
left: -50px;
height: 100%;
width: 100%;
border-radius: 50%;
border: 50px solid transparent;
border-bottom-color: blue;
transition: all 0.6s;
}
div:before {
content: "";
position: absolute;
top: -10px;
left: -10px;
height: 100%;
width: 100%;
border: 10px solid blue;
border-radius: 50%;
}
div:hover:after {
top: -30px;
left: -50px;
border-bottom-color: tomato;
}
/*DEMO ONLY*/
html {
text-align: center;
height: 100%;
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
}HOVER ME
<div></div>SVG
Вот решение SVG.
Использовал путь обрезки на элементе круга (чтобы исключить угол изображения)
Затем приготовили кусочек пиццы с элементом пути с типом дуги.
<svg width="100px" height="100px" viewbox="0 0 110 110">
<defs>
<clipPath id="myClip">
<path clip-rule="evenodd"
d="M0 0 100 0 100 100 0 100Z
M67 67 100 67 100 100 67 100Z"/>
</clipPath>
</defs>
<circle fill="none" stroke="LightBlue" stroke-width="25" cx="50" cy="50" r="35" clip-path="url(#myClip)"/>
<path fill="LightBlue" d="M70 70 70 100 A 25 25 0 0 0 100 70Z"/>
</svg>По сути, это не более 3-х div и немного CSS, и, вероятно, с небольшим волнением, это может быть сделано только для одного div и немного CSS.
Синий пончик - это просто div с толстой синей рамкой и CSS-свойством border-radius, установленным для того, чтобы скругленные углы образовывали круг.
Кусочек пиццы на самом деле представляет собой простой квадратный элемент с голубым фоном и толстой белой каймой.
Эти два элемента были бы в третьем элементе div, который также использовал border-radius, чтобы сделать его кругом, но либо имел цвет границы прозрачным, либо фактически не имел границы, но в любом случае был закруглен. Этот внешний третий div также будет иметь свойство переполнения, установленное на скрытое, что дает округленную часть ломтика пиццы, так как этот квадрат будет обрезан внешним кругом.
Кусочек пиццы может быть дочерним элементом пончика, и его свойство position должно быть установлено на относительное, или, вероятно, он также может быть дочерним элементом внешнего ограничивающего div в качестве абсолютного положения, и в этом последнем случае внешний ограничивающий div будет иметь свойство position установить относительно.
Теперь это было бы так, как если бы вы делали это с тремя div-ами, но, как я уже упоминал ранее, возможно, с небольшим беспокойством можно было бы свести их к одному div, если бы кто-то использовал псевдо::before и::after классы для подделки два из div, с теми, которые, вероятно, были кусочком пончика и пиццы, который оставлял бы только усеченный div как единственный реальный элемент на странице.
Это было бы замечательно, так как в итоге у вас получилось бы что-то вроде разметки...
<div class="logo"/>
... и больше ничего
Ну что за хрень, называй это Рождество в мае
<style type="text/css">
.logo ,.logo::before {border-radius :50%;display:inline-block;padding:0;}
.logo::before ,.logo::after {position :absolute;content:"";}
.logo { text-align:center;position:relative;border:none;
width:11em;height:11em;overflow:hidden;}
.logo::before { left:.75em;top:.75em;width:3.5em;height:3.5em;
margin:0;border:3em solid #00A6E1;}
.logo::after { border:.4em solid #fff;top:6.8em;
left:6.8em;width:5em;height:5em;
background-color:#0ae;display:block;}
</style>
.logo,
.logo::before {
border-radius: 50%;
display: inline-block;
padding: 0;
}
.logo::before,
.logo::after {
position: absolute;
content: "";
}
.logo {
text-align: center;
position: relative;
border: none;
width: 11em;
height: 11em;
overflow: hidden;
}
.logo::before {
left: .75em;
top: .75em;
width: 3.5em;
height: 3.5em;
margin: 0;
border: 3em solid #00A6E1;
}
.logo::after {
border: .4em solid #fff;
top: 6.8em;
left: 6.8em;
width: 5em;
height: 5em;
background-color: #0ae;
display: block;
}<div class="logo" />Это делает логотип вашим после, используя, конечно, только один div, обычный старый CSS, без изображений или других хлопающих ловушек. Я на самом деле программист по профессии, но для меня CSS это просто своего рода другой язык программирования, и каждый, кто хочет вытащить холст SVG и т. П., Решил, что стоит показать, как примерно 9 строк текста могут отправить их в сарай для дерева.,:)
Кажется, что он отлично работает как на Chrome / webkit, так и на Mozilla, не могу точно сказать, как Microsoft взорвется, когда я загружаюсь с рабочего стола Linux, и у меня почти десять лет не было машины M$.
П р и м е ч а н и е - Мои привычки уже приняли некоторые мелочи в новых спецификациях, относящихся к псевдоэлементам, в которых традиционно используется синтаксис.logo: before и.logo: after, но новые правила говорят, что вместо этого я должен использовать двойной "::" старого ":", так что если M$ exploder скулит, можно попробовать поменять "::" на старое ":", что IE может понравиться лучше. Новые браузеры действительно не заботятся.