Question

我试图给用css制作的三角形边框给一个盒子阴影。

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

<div id="triangle-topleft" />

我试过但不能给右边框一个阴影。有一个简单的CSS方法来实现这一目标吗？这就是它最终应该是什么样子（对于实际的阴影来说更好）。

Answer 1

您可以使用filter css规则。

#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" />

Answer 2

您可以使用其他方法创建三角形。在这里，我使用div

旋转并将overflow: hidden放置在容器中

您可以在旋转的box-shadow上设置所需的div，并调整值以获得所需的效果。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 3

阴影更新（非纯色边框）。

您可以在此处合并linear-gradient和伪元素。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

三角形的实线边框

你可以创建三角形及其边界＆＃34;使用linear-gradient。假设你想要5px的红线宽度。演示：

＆＃13;

#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%);
}

＆＃13;

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

＆＃13;

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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

给边框右边一个盒子阴影

4 个答案:

阴影更新（非纯色边框）。

三角形的实线边框