Как добиться такого эффекта создания треугольника из окружности, используя только CSS?
2 ответа
#test {
width: 100px;
height: 100px;
position: relative;
border-radius: 50px;
border: 2px solid red;
margin-top: 40px;
}
#test:after {
content: '';
position: absolute;
width: 20px;
height: 20px;
transform: rotate(45deg);
left: 38px;
top: -11px;
border-left: 2px solid red;
border-top: 2px solid red;
background: white;
}
<div id="test"></div>
пипка - это квадрат, у которого два бордера, повёрнут на 45 градусов и фон совпадает с фоном круга. Остальное уже можно самому доделать
* {
margin: 0;
padding: 0;
}
body {
display: flex;
min-height: 100vh;
}
div {
margin: auto;
width: 160px;
height: 160px;
border: 3px solid red;
border-radius: 100%;
position: relative;
}
div::after {
content: '';
position: absolute;
left: 50%;
top: 0;
transform: translate(-50%, -50%) rotate(45deg);
border: 3px solid red;
border-bottom: none;
border-right: none;
width: 24px;
height: 24px;
background-color: white;
}
<div></div>