给border-right添加一个盒子阴影

Question

我正在尝试为使用CSS创建的三角形添加边框阴影。

#triangle-topleft {
   width: 0;
   height: 0;
   border-top: 300px solid blue;
   border-right: 100px solid transparent;
  }

<div id="triangle-topleft" />

我尝试过但无法为右边框添加阴影。有没有一种简单的CSS方法可以实现这个效果？最终应该是这样的（只是用一个实际的阴影更好）。

- Southgarden116

---

你想让一个边框有边框吗？那么不行。可以使用 drop-shadow 或者使用渐变或伪元素。 - Paulie_D

Answer 1

你可以使用CSS规则中的filter。

#triangle-topleft {
      width: 0;
      height: 0;
      border-top: 300px solid blue;
      border-right: 100px solid transparent;
      filter: drop-shadow(3px 3px 3px hsla(0, 0%, 0%, 1));
  }

<div id="triangle-topleft" />

- G.Hunt

Answer 2

你可以使用不同的方法创建三角形。在这里，我通过旋转和定位容器内的 div 来实现，该容器带有 overflow: hidden 属性。

你可以在旋转后的 div 上设置所需的 box-shadow，并调整值以获得所需的外观。

#triangle-topleft {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

#triangle-topleft div {
  background: blue;
  width: 100%;
  height: 300px;
  transform: rotate(290deg);
  position: absolute;
  top: -35%;
  left: -80%;
  box-shadow: 4px 4px 8px red;
}

<div id="triangle-topleft">
  <div></div>
</div>

- sol

Answer 3

关于阴影的更新（非实色边框）。

您可以在这里结合使用linear-gradient和伪元素。

#triangle-topleft {
  width: 100px;
  height: 300px;
  /* gradient for triangle */
  background-image: linear-gradient(to right bottom, blue 50%, transparent 50%);
  position: relative;
}

#triangle-topleft:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  /* gradient for shadow */
  background-image: linear-gradient(to right bottom,
    rgba(17, 17, 17, 0.7) calc(50% - 5px),
    rgba(17, 17, 17, 0) 50%,
    transparent 50%);
  transform: translate(5px, 5px);
  z-index: -1;
}

<div id="triangle-topleft"></div>

---

三角形的实线边框

您可以使用linear-gradient创建三角形及其“边框”。假设您想要5px的红色线宽。演示：

#triangle-topleft {
  /* desired width + red line width */
  width: 105px;
  height: 300px;
  /* subtract red line width using calc functon */
  background-image: linear-gradient(to right bottom,
    blue calc(50% - 5px),
    red calc(50% - 5px),
    red 50%, transparent 50%);
}

<div id="triangle-topleft"></div>

您也可以在这里使用伪元素：

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 300px solid blue;
  border-right: 100px solid transparent;
  position: relative;
}

#triangle-topleft:after {
  content: "";
  position: absolute;
  top: 15px;
  border-top: 315px solid red;
  border-right: 105px solid transparent;
  transform: translate(0, -100%);
  z-index: -1;
}

<div id="triangle-topleft"></div>

- Vadim Ovchinnikov

Answer 4

这样的东西怎么样？

#triangle-topleft {
  position: relative;
  width: 0;
  height: 0;
  border-top: 300px solid blue;
  border-right: 100px solid transparent;
}

#triangle-topleft::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 300px solid red;
  border-right: 100px solid transparent;
  transform: translate(5px, -100%);
  z-index: -1;
}

#triangle-topleft::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 5px;
  height: 15px;
  background-color: red;
  z-index: -1;
}

基本上，这是将您拥有的内容添加2个伪元素 - ::before和::after，绝对定位它们，然后应用变换。

参考链接：http://jsbin.com/fezutuhulo/edit?html,css,output

- psdpainter