我已经找到了一些垂直横幅的解决方案,我想在我的bootstrap 3响应设计中使用,但我想修改它,我需要帮助,因为我没有掌握将我的横幅编码成这样的概念。
这就是我找到的解决办法。
CSS和HTML如下
div {
background: deeppink;
height: 30px;
width: 30px;
position: relative;
text-align: center;
font: 600 16px sans-serif;
color: #fff;
line-height: 27px;
border: 0;
}
div:after {
content: "";
position: absolute;
bottom: -18px;
left: 0;
height: 0;
width: 0;
border: solid 15px deeppink;
border-bottom-color: transparent;
}
div:hover {
background: purple;
}
div:hover:after {
border-color: purple;
border-bottom-color: transparent;
}
<div> i </div>
此处的横幅请参见Fiddle。
现在,我如何修改这个横幅以锁定更像我的横幅,特别是如何使这个例子横幅的头部看起来像图片上的尖。
有人能帮我做这个吗,谢谢。
最佳答案
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
padding: 50px;
}
div {
background: #1589A1;
padding: 20px;
position: relative;
color: #fff;
width: 100px;
min-height: 70px;
font: 600 16px sans-serif;
color: #fff;
}
div:after {
content:'';
position: absolute;
left: 50%;
bottom: -100px;
border: 50px solid transparent;
border-top: 50px solid #1589A1;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
div span{
padding: 30px 0 30px;
position: relative;
display: block;
z-index: 1;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
<div>
<span>solution</span>
<span>solution</span>
</div>