Question

我在设计这个箭头时遇到了很多麻烦。

现在我被一个坚实的三角形困住了，我试图把它变成一个发型线＆＃34;箭头，像这样：http://davidkelley.me/2013/03/01/css-hairline-arrows.html。

＆＃13;

.hairline-down-arrow {
  border: 1px solid black;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  background-color: white;
}
.hairline-down-arrow:after {
  content: "";
  position: relative;
  top: 44px;
  left: 15px;
  border-top: solid 25px black;
  border-right: solid 15px transparent;
  border-bottom: solid 25px transparent;
  border-left: solid 15px transparent;
}

＆＃13;

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

＆＃13;

有任何帮助吗？感谢。

Answer 1

为什么不使用svg？

<svg width="70" height="55" viewBox="-2.5 -5 75 60" preserveAspectRatio="none">
  <path d="M0,0 l35,50 l35,-50" fill="none" stroke="black" stroke-linecap="round" stroke-width="5" />
</svg>

或者您可以使用：pseudo-element。

div {
  position: relative;
  width: 80px;
  height: 1px;
  background: black;
  transform: rotate(55deg);
  transform-origin: 0% 0%;
}
div:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  left: 100%;
  background: black;
  transform: rotate(-110deg);
  transform-origin: 0% 100%;
}

<div></div>

Answer 2

您可以将border用于伪元素，rotate，skew以便

＆＃13;

.hairline-down-arrow {
  border: 1px solid black;
  border-radius: 50%;
  width: 65px;
  height: 65px;
  position: relative;
  background-color: white;
}
.hairline-down-arrow:after {
  content: "";
  position: absolute;
  top: 4%;
  left: 54%;
  width: 30px;
  height: 30px;
  border-width: 0px 1px 1px 0px;
  transform: rotate(46deg) translate(-50%) skew(10deg, 10deg);
  transform-origin: left;
  border-style: solid;
  border-color: black;
}

＆＃13;

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

＆＃13;

Answer 3

嘿，我只是向左方向做，你可以做一些小改动，向任何方向移动。

.leftchat:after {
 content: "";
 position: absolute;
 top: 6px;
 left: -7px;
 border-style: solid;
 border-width: 5px 7px 5px 0;
 border-color: transparent #fff;
 display: block;
 width: 0;
 height:0
 }

.leftchat:before{
 content: "";
 position: absolute;
 top: 2px;
 left: -12px;
 border-style: solid;
 border-width: 8px 11px 8px 0;
 border-color: transparent #D1D2D4;
 display: block;
 width: 0;
 height:0;
 z-index: 0
 }

Answer 4

我创建了一个CSS onlyarrow： http://jsfiddle.net/x3802ox3/

<div class="link">This is text with a downarrow<div class="arrow"></div></div>

.link {
    position: relative;
    display: inline-block;
    padding-right: 27px;
    font-size: 18px;
}
.arrow {
    position: absolute;
    right: 0;
    top: 11px;
    display: block;
    width: 20px;
}
    .arrow:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 2px;
        width: 12px;
        background: #000000;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        transform: rotate(40deg);
    }
    .arrow:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        height: 2px;
        width: 12px;
        background: #000000;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        border-top-right-radius: 3px;
        border-bottom-right-radius: 3px;
        transform: rotate(-40deg);
    }

Answer 5

Live demo

纯CSS

.arrow {
  display: inline-block;
  position: relative;
  margin: 1em;
}

.arrow.thin.up {
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  height: 40px;
  width: 40px;
  transform: rotate(45deg);
}

.arrow.thin.left {
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  height: 40px;
  width: 40px;
  transform: rotate(135deg);
}

.arrow.thin.down {
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  height: 40px;
  width: 40px;
  transform: rotate(225deg);
}

.arrow.thin.right {
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  height: 40px;
  width: 40px;
  transform: rotate(315deg);
}

或作为SASS mixin

@mixin arrow($color, $direction: down, $size: 10px) {
    border-top: 1px solid $color;
    border-left: 1px solid $color;
  height: $size;
  width: $size;
  @if $direction == 'up' {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
        -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
    } @else if $direction == 'left' {
        -webkit-transform: rotate(135deg);
        -moz-transform: rotate(135deg);
        transform: rotate(135deg);
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-0.7071067811865475, M12=0.7071067811865476,M21=-0.7071067811865475,M22=0.7071067811865476);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=-0.7071067811865475, M12=0.7071067811865476,M21=-0.7071067811865475,M22=0.7071067811865476)";
    } @else if $direction == 'down' {
        -webkit-transform: rotate(225deg);
        -moz-transform: rotate(225deg);
        transform: rotate(225deg);
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-0.7071067811865477, M12=-0.7071067811865475,M21=-0.7071067811865477,M22=-0.7071067811865475);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=-0.7071067811865477, M12=-0.7071067811865475,M21=-0.7071067811865477,M22=-0.7071067811865475)";
  } @else if $direction == 'right' {
        -webkit-transform: rotate(315deg);
        -moz-transform: rotate(315deg);
        transform: rotate(315deg);
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.7071067811865474, M12=-0.7071067811865477,M21=0.7071067811865474,M22=-0.7071067811865477);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865474, M12=-0.7071067811865477,M21=0.7071067811865474,M22=-0.7071067811865477)";
    }
}
body { 
    background: #000; 
    text-align: center;
    padding: 5em;
}
.arrow {
  display: inline-block;
  position: relative;
  margin: 1em;
}

.arrow.thin.up {
  @include arrow($direction: up, $color: #fff, $size: 40px);
}

.arrow.thin.left {
  @include arrow($direction: left, $color: #fff, $size: 40px);
}

.arrow.thin.down {
  @include arrow($direction: down, $color: #fff, $size: 40px);
}

.arrow.thin.right {
  @include arrow($direction: right, $color: #fff, $size: 40px);
}

CSS箭头向下箭头

5 个答案: