Блог

Главная - Вопросы по программированию - Прозрачный треугольник CSS над фоном с полупрозрачными границами

Прозрачный треугольник CSS над фоном с полупрозрачными границами

#html #css #background

#HTML #css #фон

Вопрос:

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

Интересно, возможно ли добиться этого с помощью CSS?

Моя проблема в том, что эти перекрывающиеся «границы» — я мог бы переместить их с помощью translate, чтобы они не перекрывались, но тогда мне нужно было бы отрегулировать угловые градусы, чтобы иметь правильную вершину угла.

Есть ли какие-либо лучшие решения для этого?

 .container {
  background: url("https://images.pexels.com/photos/310452/pexels-photo-310452.jpeg?cs=srgbamp;dl=pexels-dom-j-310452.jpgamp;fm=jpg");
  height: 300px;
  display: flex;
  position: relative;
}

.left {
  width: 40%;
  height: 100%;
  background: white;
}

.right {
  width: 60%;
  height: 100%;
  background: transparent;
}

.right:before,
.right:after {
  content: '';
  width: 11%;
  height: 100%;
  background: white;
  /* background-clip:padding-box; */
  position: absolute;
  left: 40%;
}

.right:before {
  top: 0;
  transform: rotate(30deg) translate(-80%, -30%);
  /* border-right: 30px solid rgba(0, 0, 136 ,0.5); */
  box-shadow: 30px 0 0 0 rgba(0, 0, 136, 0.5);
}

.right:after {
  bottom: 0;
  transform: rotate(-30deg) translate(-80%, 40%);
  /* border-right: 30px solid rgba(0, 0, 136 ,0.5); */
  box-shadow: 30px 0 0 0 rgba(0, 0, 136, 0.5);
} 
 <div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>

Комментарии:

1. @XBuilder египетские боги… тупой я. Спасибо! Пожалуйста, добавьте его в качестве ответа.

Ответ №1:

Вот идея использования градиентов и масок. Вам понадобятся два вида градиента, и оба должны быть одинаковыми в свойствах маски и фона

 .container {
  background: 
    linear-gradient(120deg, transparent 40%,rgba(0, 0, 136, 0.5) 40.5% 45%, transparent 45.5%) top   /100% 50% no-repeat,
    linear-gradient(60deg,  transparent 40%,rgba(0, 0, 136, 0.5) 40.5% 45%, transparent 45.5%) bottom/100% 50% no-repeat,
    url("https://images.pexels.com/photos/310452/pexels-photo-310452.jpeg?cs=srgbamp;dl=pexels-dom-j-310452.jpgamp;fm=jpg");
  -webkit-mask:
    linear-gradient(120deg, transparent 40%,#fff 40.5%) top   /100% 50% no-repeat,
    linear-gradient(60deg,  transparent 40%,#fff 40.5%) bottom/100% 50% no-repeat;
  height: 400px;
} 
 <div class="container"></div>

Другая версия с другими значениями

 .container {
  background: 
    linear-gradient(131deg, transparent 40%,rgba(0, 0, 136, 0.5) 40.1% calc(40%   18px), transparent calc(40.1%   18px)) top   /100% 40% no-repeat,
    linear-gradient(60deg,  transparent 40%,rgba(0, 0, 136, 0.5) 40.1% calc(40%   20px), transparent calc(40.1%   20px)) bottom/100% 60% no-repeat,
    url("https://images.pexels.com/photos/310452/pexels-photo-310452.jpeg?cs=srgbamp;dl=pexels-dom-j-310452.jpgamp;fm=jpg");
  -webkit-mask:
    linear-gradient(131deg, transparent 40%,#fff 40.1%) top   /100% 40% no-repeat,
    linear-gradient(60deg,  transparent 40%,#fff 40.1%) bottom/100% 60% no-repeat;
  height: 400px;
} 
 <div class="container"></div>

Просто отрегулируйте оба градиента так, как вы хотите, чтобы получить окончательную форму