0

не могу сверстать треугольник из дизайна, первая проблема состоит в том что я не могу закруглить края треугольника как на картинке,вторая проблема что этот треугольник должен быть кнопкой Буду благодарен за любую помощь введите сюда описание изображения

2
  • Самое простое сохранить треугольник как картинку и использовать background-image. Можно попробовать сделать svg и использовать его 3 окт 2022 в 10:32
  • @DmitriyKondratiuk спасибо большое,попробую 3 окт 2022 в 10:36

2 ответа 2

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>

0

Пример

.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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.