html - 如何控制 CSS 箭头大小
问题描述
我在 CSS 中创建了一个箭头。除了箭头的大小之外,一切都正常工作。我不确定如何使它变小。
如何使箭头变小?
#blue {
width: 100%;
height: 100vh;
background: blue;
}
#box2 {
position: absolute;
top: 25%;
right: 25%;
z-index: 1;
}
#box2Text {
color: #FFF;
font-family: 'Muli', sans-serif;
font-size: 2rem;
font-weight: 300;
line-height: 1.4em;
padding: 80px;
border: 6px solid #FFF;
border-radius: 2px;
display: block;
text-align: center;
}
#arrow {
margin-top: 10px;
border: solid #FFF;
border-width: 0 3px 3px 0;
display: block;
padding: 3px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
<section id="blue">
<div id="box2">
<span id="box2Text">View Services</span>
<div id="arrow"></div>
</div>
</section>
期望的输出:
解决方案
使用箭头作为文本 div 的伪元素,您可以轻松放置它并调整其大小:
#blue {
width: 100%;
height: 100vh;
background: blue;
}
#box2 {
position: absolute;
top: 25%;
right: 25%;
z-index: 1;
}
#box2Text {
color: #FFF;
font-family: 'Muli', sans-serif;
font-size: 2rem;
font-weight: 300;
line-height: 1.4em;
padding: 80px;
border: 6px solid #FFF;
border-radius: 2px;
display: block;
text-align: center;
position:relative;
}
#box2Text:after {
content:"";
left:calc(50% - 5px);
margin-top:40px;
position:absolute;
border: solid #FFF;
border-width: 0 3px 3px 0;
width:10px;
height:10px;
transform: rotate(45deg);
}
<section id="blue">
<div id="box2">
<span id="box2Text">View Services</span>
</div>
</section>
推荐阅读
- scala - Elasticsearch 火花读取缓慢
- vue-chartjs - vue-chartjs:是否可以根据值动态更改颜色
- r - 跨参与者构建马尔可夫链
- python - TypeError: 不支持的操作数类型 //: 'list' 和 'int'
- c# - 如何使用 OData.net 将带有自定义数据的多对多关系记录插入到 CRM?
- r - 如何使用 mutate() 从具有矢量输出的函数创建多个变量?
- machine-learning - 从 BigQuery ML 中的训练数据中排除列
- sql - SQL Oracle - 查询以根据数据匹配规则返回行
- ldap - 从 Aritfactory 连接到 LDAP
- ios - 无法将 UIButton 插座添加到 UIView