10

角を丸くするために、border-radius プロパティを使用しています。しかし、この形状の角を丸くする方法がわかりません。どちらの側からも同じ寸法を指定しようとしましたが、正確な形状が得られません。ここにいくつかの CSS3 プロパティがありませんか?

ここに画像の説明を入力

clip css プロパティが答えかどうか疑問に思っています。

アップデート：

http://jsfiddle.net/YWnzc/136/

4

6 に答える 6

21

デモ

#player {
  margin: 32px;
  position: relative;
  width: 400px;
  height: 250px;
  background-color: #222;
}

#inner {
  transform: rotate(45deg);
  background-color: silver;
  width: 100px;
  height: 100px;
  top: 20px;
  left: -50px;
  position: relative;
  border-radius: 20px;
}

#outer {
  position: absolute;
  top: 50px;
  left: 165px;
  width: 70px;
  height: 140px;
  overflow: hidden;
}
<div id="player">
  <div id="outer">
    <div id="inner"></div>
  </div>
</div>

これにより、次が生成されます。

ここに画像の説明を入力

この効果は、正方形を作成し、CSS 変換で回転させ、角を丸め、外側のボックスで切り取ることによって実現されます。内側のエレメントは自由に調整できるので、ある程度の柔軟性があります。

http://css3shapes.com/にはいくつかの良い例があります (ページの下部にあるハートに注意してください)

代替案

SVG 画像はこのタイプの形状をサポートしており、最新のすべてのブラウザーでサポートされています。シンプルな SVG は XML として手動でコーディングでき、それらを操作するためのさまざまな無料/有料エディターがあります。

関連項目: Raphaël、Web 上でベクター グラフィックスを操作するためのライブラリ

于 2012-08-20T17:26:36.180 に答える