CSSの三角形には意味がありません

ドリューダビッド

これが起こっていることです:

ずんぐりした三角形!

CSS:

.speech-box {
    height:76px;
    width:220px;
    padding:6px 10px;
    background-image: linear-gradient(#4f4f4f,#000);
}

.speech-box:before {
    content:'';
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent; 
    border-right:5px solid #4f4f4f;
    position:relative;
    left:-15px;
    top:-3px;
}

そして私のHTML:

<div class="speech-box">
  <span class="speech"></span>
</div>

そしてここにフィドルがあります:http//jsfiddle.net/xqy4dLbc/

HTMLに問題があると思いますか?

web-tiki

追加する必要があります

display:block;

または

display:inline-block;

.speech-box:before

デモ

疑似要素のデフォルトの表示プロパティはinlineMDNを参照)であり、インライン要素に高さを設定することはできません。したがって、height:0;設定したものは適用されません。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

一部の三角形を他の三角形の後に描画させる方法はありますか?

分類Dev

<li>の終わりにあるcss三角形

分類Dev

既存の三角形は削除できません

分類Dev

C ++ OpenGLテクスチャキューブに三角形がありません

分類Dev

Service FabricServiceには黄色の三角形のアイコンがあります

分類Dev

私が実装したBowyer-WatsonDelaunay Triangulationは、スーパー三角形の点を含む三角形を削除しません

分類Dev

逆三角形を作る必要があります

分類Dev

SkiaSharpはStrokeAndFillで三角形を塗りつぶしません

分類Dev

AIRMobile-テキストフィールドに青い三角形のカーソルがありません

分類Dev

pyOpenGL三角形が描画されていません

分類Dev

三角形を右に向ける必要があります

分類Dev

Openglの三角形は描かれていません

分類Dev

OpenGL3.3は私の三角形を描画しません

分類Dev

CSSの三角形はどのように機能しますか?

分類Dev

円は三角形の境界内にとどまります

分類Dev

Python OpenGLは、四辺形のすべての三角形をレンダリングするわけではありません

分類Dev

css-三角形は画面の100%に隣接します

分類Dev

OpenGLはいくつかの三角形を描くことができません

分類Dev

OpenGLはいくつかの三角形を描くことができません

分類Dev

私の写真に三角形を描くことができません

分類Dev

三角形のブロックが全幅に伸びていません

分類Dev

ホバードロップダウンの三角形はXcode10に表示されません

分類Dev

「吹き出し」の形をしたデータラベルには、短いテキストのポインティング三角形がありません

分類Dev

CSS:三角形の影

分類Dev

ブースト付きボロノイからのドロネー:非整数点座標の三角形がありません

分類Dev

三角形が不等辺三角形、二等辺三角形、正三角形、または三角形でないかどうかをチェックするJAVAプログラム

分類Dev

背景に縞模様があり、上部に三角形のカットがある形状

分類Dev

テーブルの<td>要素の下にあるCSS三角形

分類Dev

三角形分割を描画するには、どのOpenGLプリミティブを使用する必要がありますか?

Related 関連記事

  1. 1

    一部の三角形を他の三角形の後に描画させる方法はありますか?

  2. 2

    <li>の終わりにあるcss三角形

  3. 3

    既存の三角形は削除できません

  4. 4

    C ++ OpenGLテクスチャキューブに三角形がありません

  5. 5

    Service FabricServiceには黄色の三角形のアイコンがあります

  6. 6

    私が実装したBowyer-WatsonDelaunay Triangulationは、スーパー三角形の点を含む三角形を削除しません

  7. 7

    逆三角形を作る必要があります

  8. 8

    SkiaSharpはStrokeAndFillで三角形を塗りつぶしません

  9. 9

    AIRMobile-テキストフィールドに青い三角形のカーソルがありません

  10. 10

    pyOpenGL三角形が描画されていません

  11. 11

    三角形を右に向ける必要があります

  12. 12

    Openglの三角形は描かれていません

  13. 13

    OpenGL3.3は私の三角形を描画しません

  14. 14

    CSSの三角形はどのように機能しますか?

  15. 15

    円は三角形の境界内にとどまります

  16. 16

    Python OpenGLは、四辺形のすべての三角形をレンダリングするわけではありません

  17. 17

    css-三角形は画面の100%に隣接します

  18. 18

    OpenGLはいくつかの三角形を描くことができません

  19. 19

    OpenGLはいくつかの三角形を描くことができません

  20. 20

    私の写真に三角形を描くことができません

  21. 21

    三角形のブロックが全幅に伸びていません

  22. 22

    ホバードロップダウンの三角形はXcode10に表示されません

  23. 23

    「吹き出し」の形をしたデータラベルには、短いテキストのポインティング三角形がありません

  24. 24

    CSS:三角形の影

  25. 25

    ブースト付きボロノイからのドロネー:非整数点座標の三角形がありません

  26. 26

    三角形が不等辺三角形、二等辺三角形、正三角形、または三角形でないかどうかをチェックするJAVAプログラム

  27. 27

    背景に縞模様があり、上部に三角形のカットがある形状

  28. 28

    テーブルの<td>要素の下にあるCSS三角形

  29. 29

    三角形分割を描画するには、どのOpenGLプリミティブを使用する必要がありますか?

ホットタグ

アーカイブ