如何编写垂直横幅

Question

我找到了一些垂直横幅的解决方案我想在我的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横幅。 现在我如何修改这个横幅以锁定更像我的横幅，特别是如何让这个示例横幅的头部看起来像在图片上一样尖。 有人可以帮我做这件事，谢谢。

Answer 1

＆＃13;

＆＃13;

*{
    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);
}

＆＃13;

<div> 
    <span>solution</span>
    <span>solution</span>
</div>

＆＃13;

＆＃13;

＆＃13;