边框内嵌CSS

Question

通过CSS三角形教程的帮助，我学会了如何创建三角形形状。

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

我试图为这个三角形 添加边框 ，但是我无法做到。

我已经实现了以下效果：

期望的效果：(使用类似于灰色的边框)

请查看这个 JSFiddle

我被卡在这里，不知道该从哪里开始。我已经尝试过outline，但都没有成功（我知道这行不通）。

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

感激任何帮助。

注：我正在使用CSS而不是使用图片来实现这个效果。

- Praveen

---

由于您使用边框来实际创建三角形，那么您认为如何添加另一个边框呢？这种技术更像是一种黑客技巧而不是合法的CSS，它之所以有效只是因为当前浏览器渲染边框角落的方式。 - MightyPork

@MightyPork 是的，我已经尝试过了。但你知道我正在尝试的是三角形的边框（一条边）。使用before伪选择器的斜线css。由于多个边框是可能的，我想尝试使用css来解决这个问题，我不知道一些css极客可以轻松解决它。 - Praveen

你是想在一个侧面上只有边框，还是想要三角形周围有黑色边框？ - Harry

Answer 1

当使用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以产生三角形的元素，然后向其添加一个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的浏览器中使用。

---

以下选项并没有直接回答问题，因为它们不是在边框内部创建边框，而是使用其他方法创建带有边框的箭头/三角形。

选项3：在元素上使用线性渐变，旋转以产生三角形，并使用常规边框属性添加边框。

.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：使用旋转的伪元素（背景色为三角形颜色）来制作三角形，然后向其添加普通边框。父元素的溢出设置为隐藏，并适当定位伪元素，以仅显示其中一半（创造三角形的假象）。

.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);
}

- Harry

---

+1 我认为它一定使用了 before/after 伪选择器。希望还有一个明智的解决方案。让我们等待 :) 非常感谢。 - Praveen

Answer 2

尝试在您的CSS中添加以下行：

.arrow-down:before {
    content: "";
    display: block;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-top: 26px solid #0f0;
    position: relative;
        left: -26px;
        top: -20px;
    z-index: -1;
}

这将绘制一个3像素的绿色边框。

在此处查看结果：jsfiddle。

- Aljullu

---

@Harry，你可以尝试调整大小。看看这个：http://jsfiddle.net/Q97T7/5/ - Aljullu

@Aljullu 我这边也点赞了。非常感谢你。 - Praveen

Answer 3

示例：http://jsfiddle.net/3fFM7/

.arrow {
    border-bottom: 60px solid transparent;
    border-left: 60px solid black;
    border-top: 60px solid transparent;
    height: 0;
    margin-left: 50px;
    width: 0;
    behavior:url(-ms-transform.htc);
    -moz-transform:rotate(90deg);
    -webkit-transform:rotate(90deg);
    -o-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
}
.arrow > div {
    border-bottom: 59px solid transparent;
    border-left: 59px solid red;
    border-top: 59px solid transparent;
    left: -60px;
    position: relative;
    top: -63px;
    width: 0;
}


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

尝试使用 transform rotate :)

或者:

演示: http://jsfiddle.net/tKY25/1/

<div class="triangle-with-shadow"></div>


.triangle-with-shadow {
   width: 100px;
   height: 100px;
   position: relative;
   overflow: hidden;
    transform: rotate(180deg);
}
.triangle-with-shadow:after {
   content: "";
   position: absolute;
   width: 50px;
   height: 50px;
   background: #999;
   transform: rotate(45deg);
   top: 75px;
   left: 25px;
   box-shadow: 0px -5px 0 0px rgba(0,0,0,100);
}

- daniel__