给border-right一个盒子阴影答案

【问题标题】：giving border-right a box shadow给border-right一个盒子阴影
【发布时间】：2017-08-01 20:07:37
【问题描述】：

我正在尝试为我用 css 制作的三角形的边框添加一个盒子阴影。

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

&lt;div id="triangle-topleft" /&gt;

我试过了，但不能给右边框一个阴影。有没有简单的css方法来完成这个？这就是它最终的样子（如果有实际的阴影会更好）。

【问题讨论】：

你想要一个边框有一个边框..那么没有。 drop-shadow 可能 ....或使用渐变或伪元素。

标签： html css

【解决方案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));
  }

&lt;div id="triangle-topleft" /&gt;

【讨论】：

【解决方案2】：

您可以使用不同的方法创建三角形。在这里，我在带有overflow: hidden 的容器中旋转并定位了div

您可以在旋转后的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>

【讨论】：

【解决方案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;
}

&lt;div id="triangle-topleft"&gt;&lt;/div&gt;

三角形的实线边框

您可以使用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%);
}

&lt;div id="triangle-topleft"&gt;&lt;/div&gt;

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

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

&lt;div id="triangle-topleft"&gt;&lt;/div&gt;

【讨论】：

【解决方案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

【讨论】：