html - cssでエッジの効いたコーナーを作る方法

Question

以下のようなエッジの効いたコーナーを作る方法を知っている人はいますか? エッジがコーナーをどのように包み込むかを確認してください。用語も知りたいです（もしあれば）。クロス ブラウザーのサポート (IE8 以上、おまけで IE7) は必須です。助けてくれてありがとう。

Answer 1

このチュートリアルをチェックしてください。クロスブラウザーとの互換性はわかりませんが (CSS3 であるため)、必要な効果が得られます。

HTML:

<div>
    <h2></h2>
</div>

CSS:

div {
    width: 200px;
    padding: 50px;
    margin: 0 auto;
    border: 1px solid #333;
}

h2 {
    position: relative;
    width: 50%;
    height: 50px;
    margin: 30px 10px 10px -70px;
    background-color: orange;
}

h2:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 0px;
    top: 100%;
    border-width: 5px 10px;
    border-style: solid;
    border-color: #666 #666 transparent transparent;
}

JS フィドルの例

Answer 2

.box{
    background: #666;
    border: 4px solid #fff;
    box-shadow: 0px 0px 20px #000;
    width: 200px;
    height: 200px;
    margin: 40px auto;
    position: relative;
}

.ribbon{
    background: #FFA500;
    position: absolute;
    width: 100%;
    top: 20px;
    left: -20px;
    height: 20px;
    padding-right: 20px;
}

.ribbon::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 20px;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 16px 10px 0;
    border-color: transparent #FFA500 transparent transparent;    
    z-index: -5;
}

HTML:

<div class="box">
    <div class="ribbon"></div>
</div>

(デモ)

私はIE 7/8が::before疑似要素をサポートしているとは思わないので、IEとの互換性が必要な場合は、別の要素を追加::beforeしてスタイルを追加してください:)

Answer 3

それedgy cornerは実際にdivは aのみであり、それを行うには 1 つの要素triangleのみが必要です。

<div id="myCorner"></div>

myCornerは div になり、myCorner:afterは三角形になります。

それをチェックしてください：http://jsfiddle.net/Starx/Xp6E7/2/

#myCorner
{
    width:100px;
    height:70px;
    background-color:orange;
     -webkit-box-shadow: 0 4px 5px -3px black;
       -moz-box-shadow: 0 4px 5px -3px black;
            box-shadow: 0 4px 5px -3px black;
    position:relative;

}

#myCorner:after
{
    content:"";    
    position:absolute;
    left: 0;
    top:100%;
    width: 0px;
    height: 0px;
    border-style:solid;
    border-width: 5px 10px;
    border-color: orange orange transparent transparent;
    z-index: -1;
}