17

現在、次のような div があります。

ここに画像の説明を入力

下に小さな三角形があるこのように表示されるように、HTML/CSS を編集する必要があります。理想的には、画像ファイルを使用せずに、純粋に HTML と CSS を使用してこれを行いたいと考えています。CSS-Tricksによると、それを行うことができます。

ここに画像の説明を入力

HTML:

<ul id="nav">
    <li class="active"><a href="#"><div class="triangle"></div>Dashboard</a></li>
    <li><a href="users/index.html"><div class="triangle"></div>Manage Users</a></li>
    <li><a href="tickets/index.html"><div class="triangle"></div>Manage Tickets</a></li>
    <li><a href="reports/index.html"><div class="triangle"></div>Reports</a></li>
</ul>

CSS:

#nav {
    float: right;
    margin: 0;
    padding: 8px 0 0 0;
    list-style: none;
    display: inline-block;
}

#nav li {
    float: left;
    padding: 7px 5px;
    margin: 0 5px;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
    border-radius: 7px;
}

#nav li a {
    color: #0b70cc;
    text-decoration: none;
    padding: 7px 5px;
}

#nav li.active a {
    color: #ffffff;
}

#nav li.active {
    background-color: #0b70cc;
    color: white;
}

JSFiddle

誰かが私がこれを行うのを手伝ってくれるなら、本当に感謝しています!

4

2 に答える 2

58

http://cssarrowplease.com/で矢印を使用して独自の div を生成します。

好きなように設定してきれいなCSSにすることができます

仕組み:
このテクニックで非常に単純な三角形を作成しましょう: 

.container {
  position: relative;
  display: block;
  width: 120px;
  height: 50px;
  background: blue;
}

.container:after{
  position: absolute;
  bottom: 0;
  height: 0;
  width: 0;
  left: 50%;
  border: 40px solid transparent;
  border-bottom-color: red;
  content: "";
}
<div class="container"></div>

重要なのは、ボーダーを適用する疑似要素のheight: 0;&です。width: 0したがって、サイズのない要素を想像できます。そして、これが国境の起源です。したがって、境界線の各辺は三角形です (理解するために、各辺を異なる色で色分けしてみてください)。
したがって、「単一の三角形」効果を作成するには、境界線に透明な色を適用し、表示する三角形に色を付けます。

代替: CSS クリップパス

clip-path新しいCSSを使用すると、非常に簡単に長方形を作成できます。ブラウザのサポートに注意してください。いつものように、IE と悲しいことに Edge は Opera Mini と同様にサポートしていません: Can I Use

簡単な例: 

.new_way {
  position: relative;
  margin: 100px auto;
  background: #88b7d5;
  width: 100px;
  padding: 20px;
  text-align: center;
}

.new_way::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% - 10px);
  background: #88b7d5;
  width: 20px;
  height: 20px;
  
  /* The points are: (left top: x y, right top: x y, center bottom: x y) */
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
<div class="new_way">
  Clip Path
</div>

したがって、必要な行は 1 行だけです。いいですね。

于 2013-08-13T12:18:12.137 に答える
9

これを「コールアウト」と呼びます。

ここではいくつかの例を示します。

http://cssdeck.com/labs/bv45bh6p (いくつかの例)

http://mrcoles.com/blog/callout-box-css-border-triangles-cross-browser/ (仕組みの説明付き)

于 2013-08-13T12:17:59.593 に答える