css - 境界線の半径と三角形の辺を持つ CSS アイテム

Question

css (画像なし) で、境界線の半径と三角形の側面を持つアイテムを作成することは可能ですか?

Answer 1

任意のサイズで鮮明にレンダリングされ、要素のサイズに適応する SVG 画像を使用できます。次のようになります...

.button {
  background: #000;
  float: left;
  position: relative;
  color: #999;
  font: 15px/130% Arial, sans-serif;
  padding: 10px 20px;
  clear: both;
  margin: 10px;
  border-radius: 5px 0 0 5px;
}

.button:after {
  content: '';
  display: block;
  width: 10px;
  position: absolute;
  right: -10px;
  height: 100%;
  top: 0;
  background: transparent url('triangle.svg') 0 0 no-repeat;
}

http://jsfiddle.net/Ch7aA/

この jsfiddle は Webkit でのみ動作します。これは、svg をインライン化して動作を理解できるようにしたためですが、外部ファイルからロードした場合は正常に動作するはずです。参照用のレンダリングは次のとおりです。

Answer 2

これを見てください: http://css-tricks.com/snippets/css/css-triangle/ またはこれ: http://jonrohan.me/guide/css/creating-triangles-in-css/

動的な高さについては、ここに質問と回答があります:動的な高さを持つ CSS 三角形

Answer 3

HTML:

<div><span>fubar</span></div>

CSS:

span{
    display:block;
    width:100px;
    float:left;
    background-color:green;
    text-align:center;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    padding:5px 0;
}
div:after {
    content: "";
    display:block;
    float:left;
    border-top: 15px solid transparent;
    border-bottom:15px solid transparent;   
    border-left: 10px solid green;
}

jsFiddle デモ

---

アップデート：

さまざまな高さを処理できるようにするには、境界線のサイズを動的に変更する JavaScript コードを記述するか、CSS を使用してテキストを切り詰める必要があります。ただし、それは特定の要件によって異なります。