Html CSS箭头向下箭头_Html_Css_Css Shapes

Html CSS箭头向下箭头

html css

Html CSS箭头向下箭头,html,css,css-shapes,Html,Css,Css Shapes,我很难按照自己的意愿设计这个箭头现在我被一个实心三角形困住了，我想把它变成一个发际线箭头，就像这样： .发际线向下箭头{ 边框：1px纯黑；边界半径：50%；宽度：65px；高度：65px；背景色：白色； } .发际线向下箭头：之后{ 内容：；位置：相对位置；顶部：44px；左：15px；边框顶部：实心25px黑色；右边框：实心15px透明；边框底部：实心25px透明；左边框：实心15px透明； } 为什么不直接使用svg呢为什么不直接使用svg呢嘿，我只是向左

我很难按照自己的意愿设计这个箭头

现在我被一个实心三角形困住了，我想把它变成一个发际线箭头，就像这样：

.发际线向下箭头{ 边框：1px纯黑；边界半径：50%；宽度：65px；高度：65px；背景色：白色； } .发际线向下箭头：之后{ 内容：；位置：相对位置；顶部：44px；左：15px；边框顶部：实心25px黑色；右边框：实心15px透明；边框底部：实心25px透明；左边框：实心15px透明； } 为什么不直接使用svg呢

为什么不直接使用svg呢

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

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

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

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

您可以为伪元素使用边框，并旋转、倾斜以使其

.发际线向下箭头{ 边框：1px纯黑；边界半径：50%；宽度：65px；高度：65px；位置：相对位置；背景色：白色； } .发际线向下箭头：之后{ 内容：；位置：绝对位置；最高：4%；左：54%；宽度：30px；高度：30px；边框宽度：0px 1px 0px；变换：旋转46度平移-50%倾斜10度，10度；变换原点：左；边框样式：实心；边框颜色：黑色； } 您可以为伪元素使用边框，并旋转、倾斜以使其

我创建了一个仅CSS向下箭头：

普通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);
}

或者作为一个时髦的混血儿

@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

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

或者作为一个时髦的混血儿

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

SVG工作得很好。非常感谢。如何将线条变得更粗？@LoCoELF-stroke-width属性：知道了。再次感谢。@LoCoELF-不客气我已经更新了第一个片段。SVG工作得很好。非常感谢。如何将线条变得更粗？@LoCoELF-stroke-width属性：知道了。再次感谢。@LoCoELF-不客气我已经更新了第一个片段。