1

Как сделать этот треугольник средствами css? Пробовал через clip и через border, но как-то всё тщетно

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

1 ответ 1

4

Это делается с помощью псевдоэлементов, задавая определённый размер border'у:

* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper {
  margin: 1rem;
  position: relative;
}

.wrapper img {
  width: 100%;
}

.wrapper::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  border-top: 250px solid;
  border-left: 250px solid;
  border-color: transparent rgba(255, 255, 0, 0.5);
}

.wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  border: none;
  border-bottom: 250px solid;
  border-right: 250px solid;
  border-color: transparent rgba(255, 0, 255, 0.5);
}
<div class="wrapper">
  <img src="https://via.placeholder.com/250x250">
</div>

Вариант на SVG (Adaptive):

* {
  margin: 0;
  padding: 0;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 500 500">
  <g>
    <image xlink:href="https://via.placeholder.com/200x200"/>
    <polygon points="0, 0 0, 200 200,200" fill="rgba(255, 0, 255, 0.5)"/>
    <polygon points="200, 0 200, 200 0,0" fill="rgba(255, 255, 0, 0.5)"/>
  </g>
</svg>

5
  • спасибо большое, вроде и сам так делал, но видимо где-то накосячил
    – WVFFLIFE
    26 мар 2018 в 14:55
  • @WVFFLIFE, был рад помочь:)
    – Arthur
    26 мар 2018 в 14:56
  • а как на счет адаптивности?
    – WVFFLIFE
    26 мар 2018 в 23:49
  • @WVFFLIFE, мне кажется с адаптивностью не выйдет, можно на SVG попробовать ещё, там с адаптивностью 100% будет
    – Arthur
    27 мар 2018 в 11:13
  • @WVFFLIFE, добавил второй вариант на SVG
    – Arthur
    27 мар 2018 в 11:21

Ваш ответ

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

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