не могу сверстать треугольник из дизайна, первая проблема состоит в том что я не могу закруглить края треугольника как на картинке,вторая проблема что этот треугольник должен быть кнопкой
Буду благодарен за любую помощь
-
Самое простое сохранить треугольник как картинку и использовать background-image. Можно попробовать сделать svg и использовать его– Dmytro Kondratiuk3 окт 2022 в 10:32
-
@DmitriyKondratiuk спасибо большое,попробую– Богдан3 окт 2022 в 10:36
Добавить комментарий
|
2 ответа
div{
width:190px;
height:125px;
overflow: hidden;
}
button{
background: #7d7;
width: 150px;
height: 150px;
transform: rotate(45deg);
top: 25px;
left: 20px;
border: none;
}
button, div, b{
border-radius: 25px;
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
b{transform: rotate(315deg);}
button:hover{background: #9f9;}
<div>
<button onclick='alert("пыщ пыщ");'>
<b>треульгольник</b>
</button>
</div>
Пример
.triangle {
margin: 0 auto;
width: 16em;
height: 16em;
position: relative;
}
.triangle__figure {
width: 16em;
height: 16em;
position: relative;
overflow: hidden;
border-radius: 20%;
transform: translateY(36%) rotate(30deg) skewY(30deg) scaleX(.866);
}
.triangle__figure::before,
.triangle__figure::after {
content: '';
width: 16em;
height: 16em;
position: absolute;
background-color: #529872;
pointer-events: auto;
}
.triangle__figure::before {
border-radius: 20% 20% 20% 53%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(.866) translateX(-24%);
}
.triangle__figure::after {
border-radius: 20% 20% 53% 20%;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(.866) translateX(24%);
}
.triangle__text {
color: #fff;
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
transform: translate(-50%, -50%);
}
<div class="triangle">
<div class="triangle__figure"></div>
<p class="triangle__text">Text</p>
</div>