Question

我正在尝试将引导程序的div设置为如下所示，不确定如何使用css执行此操作。箭头和部分标题电影请在https://plus.google.com/+SamuelMuiruri/posts/fMMhNQwPbCm

查看图片

Answer 1

我想你想在div下方创建一个TRIANGLE边缘，包含文字-'MOVIES'（见下面的截图）

enter image description here

我在这里为您创建了一个代码：JSFIDDLE

<强> HTML：

<div>Movies</div>

<强> CSS

div{
    position: relative;
    display:inline-block;
    width: 140px;
    padding: 10px;
    background:#FFC000;
    text-transform: uppercase;
    font-size: 24px;
    text-align: center;
}

div:after{
    position: absolute;
    width: 0;
    height: 0;
    border-bottom: 40px solid rgba(0, 0, 0, 0);
    border-right: 40px solid #FFC000;
    bottom: -15px;
    left: 0;
    right:0;
    margin:auto;
    content: '';
    -ms-transform: rotate(135deg); /* IE 9 */
    -webkit-transform: rotate(135deg); /* Chrome, Safari, Opera */
    transform: rotate(135deg);
}

Answer 2

首先，您必须将关于描述的标题定位为“电影”。箭头只是一个小css魔法

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-4">
            <div class="specialbox">
                <img src="https://placeimg.com/320/240/tech"/>
                <div class="specialbox__description">
                    <span class="specialbox__title">Movies</span>
                    <h2>Age of Ultron</h2>
                    <p>Tony Stark tries ti jumpstart a dormant peace-kepping program...</p>
               </div>
            </div>
        </div>
    </div>
</div>

CSS：

.specialbox {
    border: 3px solid #ccc;
}

.specialbox img {
    width: 100%;
}

.specialbox__description {
    position: relative; /* You need this, to position the title element absolute to the description */
    padding: 20px 10px;
}

.specialbox__title {
    position: absolute;
    background-color: yellow;
    text-transform: uppercase;
    padding: 10px;
    border-radius: 10px 10px 0 0;
    top: -40px; /* Adjust to the height of the title container */
}
/* Magic described here */
.specialbox__title:after {
      position: absolute;
      display: block;
      content: '';
      width: 30px;
      height: 30px;
      border: 15px solid transparent;
      left: 50%;
      bottom: -30px;
      margin-left: -15px;
      border-top: 15px solid yellow;
}

http://jsfiddle.net/ytbtbt1d/

如何为bootstap div创建css头文件

2 个答案: