css - 边框内边框 CSS

Question

在CSS Triangle tutorial的帮助下, 我学会了创建三 Angular 形。

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;   
        border-top: 20px solid #ccc;
}

我正在尝试为三 Angular 形添加边框，但我做不到。

我的收获:

预期:(尝试类似的灰色边框)

检查这个 JSFiddle

不知道从哪里开始。我尝试了 outline，但没有成功(我知道它不会成功)。

感谢您花时间阅读我的问题。

感谢任何帮助。

注意:我在 CSS 中尝试这样做，而不是使用图像。

Answer 1

当主三 Angular 形或箭头本身是使用 CSS 边框创建的时，如果不使用额外的元素就不可能为其添加另一个边框。以下是一些选项。

选项 1:使用更大尺寸的伪元素并将其定位在父元素后面以产生边框效果。

.arrow-down {
  position: relative;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #ccc;
}
.arrow-down:before {
  position: absolute;
  content: "";
  left: -22px;
  top: -20px;
  height: 0px;
  width: 0px;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-top: 21px solid black;
  z-index: -1;
}

<div class="arrow-down"></div>

.arrow-down:before {
  position: absolute;
  content: "";
  left: -22px;
  top: -20px;
  height: 0px;
  width: 0px;
  border-left: 21px solid transparent;
  border-right: 21px solid transparent;
  border-bottom: 21px solid transparent;
  border-top: 21px solid black;
  z-index: -1;
}

---

选项 2: 旋转元素(具有边框 hack 以生成三 Angular 形)，然后向其添加 box-shadow。

.arrow-down {
  width: 0;
  height: 0;
  margin: 10px;
  border-left: 0px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #ccc;
  -ms-transform: rotate(225deg);  /* IE 9 */
  -webkit-transform: rotate(225deg);  /* Chrome, Safari, Opera */
  -moz-transform: rotate(225deg);
  transform: rotate(225deg);
  box-shadow: 0px -3px 0px -1px #444;
}

<div class="arrow-down"></div>

.arrow-down {
  width: 0;
  height: 0;
  margin: 10px;
  border-left: 0px solid transparent;
  border-right: 30px solid transparent;
  border-top: 30px solid #ccc;
  transform: rotate(225deg); /* browser prefixes added in snippet */
  box-shadow: 0px -3px 0px -1px #444;
}

在 Chrome v24 和 Safari v5.1.7 中测试。应该也适用于其他 CSS3 兼容浏览器。

---

The following options do not directly answer the question as it doesn't do a border within border but are others way of producing an arrow/triangle with a border.

选项 3:在元素上使用线性渐变，旋转它以生成三 Angular 形，然后使用普通边框属性为其添加边框。

.arrow-down {
  width: 30px;
  height: 30px;
  margin: 10px;
  border-left: 2px solid #444;
  background: -webkit-linear-gradient(45deg, #ccc 50%, transparent 50%);
  background: -moz-linear-gradient(45deg, #ccc 50%, transparent 50%);
  background: -o-linear-gradient(45deg, #ccc 50%, transparent 50%);
  background: linear-gradient(45deg, #ccc 50%, transparent 50%);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-backface-visibility:hidden; /** <-- to prevent diagonal line aliasing in chrome **/
}

<div class="arrow-down"></div>

.arrow-down {
  width: 30px;
  height: 30px;
  margin: 10px;
  border-left: 2px solid #444;
  background: linear-gradient(45deg, #ccc 50%, transparent 50%);
  transform: rotate(-45deg);
  backface-visibility:hidden;
}

选项 4: 使用旋转的伪元素(背景作为三 Angular 形的颜色)生成三 Angular 形，然后为其添加正常边框。父元素的溢出被设置为隐藏，伪元素被适当定位以便只显示它的一半(创造三 Angular 形的错觉)。

.arrow-down {
  position: relative;
  height: 50px;
  width: 50px;
  overflow: hidden;
}
.arrow-down:before {
  position: absolute;
  content: '';
  top: -webkit-calc(100% * -1.414 / 2);
  top: calc(100% * -1.414 / 2);
  left: 0px;
  height: 100%;
  width: 100%;
  background: #CCC;
  border-left: 2px solid #444;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

<div class="arrow-down"></div>

.arrow-down:before {
  position: absolute;
  content: '';
  top: calc(100% * -1.414 / 2);
  left: 0px;
  height: 100%;
  width: 100%;
  background: #CCC;
  border-left: 2px solid #444;
  transform: rotate(-45deg);
}