web-dev-qa-db-ja.com

CSSの三角形：要素の前

ブートストラップを使用して、divの前にCSS三角形を作成しようとしています。

http://jsfiddle.net/B2XvZ/11/

ここに私の動作しないコードがあります：

.d:before {
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #dd4397 transparent transparent;  
}

私が見たいのは、テキスト「this」の直前にピンク色の左向き三角形があり、divとdivの間に隙間がないことです。要素をフローティングにすることでこれを試みましたが、成功しませんでした。

htmlcsscss-shapes
23
amagumori

contentプロパティを指定する必要があります。

配置するには、position:relativeを親に配置し、矢印を絶対に配置します-15px 左に。

jsFiddleの例

.d {
    position:relative;
}

.d:before {
    content:"\A";
    border-style: solid;
    border-width: 10px 15px 10px 0;
    border-color: transparent #dd4397 transparent transparent;
    position: absolute;
    left: -15px;
}
37
Josh Crozier

コンテンツプロパティと他の何かが必要です

.d:before {
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 10px 15px 10px 0;
  border-color: transparent #dd4397 transparent transparent;  
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
6
Slawa Eremkin