web-dev-qa-db-ja.com

:: afterを使用してCSS三角形を配置する方法は？

:: afterを使用して下矢印付きのdivを作成しました。 HTMLコードは次のとおりです。

<div class="sidebar-resources-categories">Topics</div>
<div class="text-content">ok ok</div>

CSSは次のとおりです。

.sidebar-resources-categories{
    height: 50px;
    margin-bottom: 20px;
    background-color: #e8e8e8;
    font-weight: 600;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
}
.sidebar-resources-categories::after{
    content: '';
    position: absolute;
    left: 42%;
    top: 100%;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #e8e8e8;
    clear: both;
}

結果は次のとおりです。

Here is the result

灰色のdivの一番下に矢印を配置したいと思います。 divと下矢印の間にコンテンツを入れたくありません。どうやってそれができるか知っていますか？

csscss3pseudo-class
15
Damien Morvan

position:relativeを.sidebar-resources-categoriesに追加するだけです

http://jsfiddle.net/matthewabrman/5msuY/

説明：:: after要素の位置はその親に基づいています。この例では、おそらく設定された高さの.sidebar-res ...の親要素があるため、そのすぐ下にレンダリングされます。 .sidebar-res ...に相対的な位置を追加すると、after要素がその親の100％に移動し、その位置は相対に設定されているため、.sidebar-res ...になります。私はそれを説明する方法がわかりませんが、それは予想される動作です。

この件について詳しく読む： http://css-tricks.com/absolute-positioning-inside-relative-positioning/

18
Matthew Abrman

クラスを追加します。

.com_box:after {
     content: '';
    position: absolute;
    left: 18px;
    top: 50px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #000;
    clear: both;

}

Jsfiddleを更新しました： http://jsfiddle.net/wrm4y8k6/8/

10
Elow

位置に三角形を設定できます。このコードを参照してください

.top-left-corner {
    width: 0px;
    height: 0px;
    border-top: 0px solid transparent;
    border-bottom: 55px solid transparent;
    border-left: 55px solid #289006;
    position: absolute;
    left: 0px;
    top: 0px;
}
0
Ankit Patel