2

введите сюда описание изображения

body {
  background: silver;
}

.triangle {
  width: 0;
  height: 0;
  display: inline-block;
  border-top: 115px solid white;
  border-left: 115px solid transparent;
  border-right: 115px solid transparent;
}
<div class="triangle"></div>

пробывал так но угол слишком острый выходит

1
  • У вас написано все верно, просто нужно было поиграться с border-top - сделать меньше.
    – And
    25 мар 2018 в 11:06

2 ответа 2

5

Вот так

.triangle {
  width: 200px;
  height: 200px;
  background: #20a3bf;
  position: relative;
}

.triangle:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  width: 0;
  height: 0;
  border-top: 50px solid #20a3bf;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}
<div class="triangle"></div>

1
  • достойный ответ
    – user33274
    25 мар 2018 в 16:31
4

body {
  background: silver;
}

.triangle {
  width: 0;
  height: 0;
  display: inline-block;
  border-top: 39px solid white;
  border-left: 115px solid transparent;
  border-right: 115px solid transparent;
}
<div class="triangle"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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