我已经找到了一些垂直横幅的解决方案,我想在我的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>

10-05 20:33
查看更多