CSS 背景上带有半透明边框的透明三角形

Question

我想知道是否可以通过 CSS 实现这一目标？

我的问题是那些重叠的“边界”——我可以用平移移动它们，这样它们就不会重叠，但是我需要调整角度以获得正确的角顶点。

有没有更好的解决方案？

.container {
  background: url("https://images.pexels.com/photos/310452/pexels-photo-310452.jpeg?cs=srgb&dl=pexels-dom-j-310452.jpg&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>

Answer 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=srgb&dl=pexels-dom-j-310452.jpg&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=srgb&dl=pexels-dom-j-310452.jpg&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>

只需像您想要的那样调整两个渐变以获得最终形状

CSS 背景上带有半透明边框的透明三角形

CSS transparent triangle over background with half-transparent borders

html

css

background