CSS箭头向下箭头
CSS箭头向下箭头
提问于 2015-01-23 02:14:13
我很难让这个箭头设计成我想要的样子。
现在我被一个实心三角形卡住了，我正试着把它变成一个“细线”箭头，就像这样：http://davidkelley.me/2013/03/01/css-hairline-arrows.html。
.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;
}<section class="hairline-down">
<div class="hairline-down-arrow"></div>
</section>
有什么帮助吗？谢谢。
回答 3
Stack Overflow用户
发布于 2015-01-23 15:05:08
您可以对伪元素使用border，并使用rotate、skew，以便它
.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;
}<div class="hairline-down-arrow"></div>
Stack Overflow用户
发布于 2015-01-23 02:32:47
嘿，我只是做了向左的方向，你可以做一些小的改变，向任何方向移动。
.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
}Stack Overflow用户
发布于 2015-01-30 07:55:44
我创建了一个CSS only向下箭头：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);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28095873
复制相关文章
相似问题