3

在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 中尝试这个而不是使用图像。

4

3 回答 3

6

当主三角形或箭头本身是使用 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：旋转元素（具有生成三角形的边框），然后box-shadow向其添加 a。

.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);
}
于 2013-08-05T12:28:31.303 回答
2

演示：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>

玩变换旋转:)

或者：

演示：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);
}
于 2013-08-05T14:30:18.793 回答
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;
}

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

在这里检查结果：jsfiddle

于 2013-08-05T12:27:42.447 回答