0

私はイメージを持っています。最近、これに画像を使用しています。しかし、この形状を使用するよりもCSS形状の方が優れていると思います。それで、CSSだけでこの形を得る方法を教えてください。ここでは画像を使用したくありません。どんな助けや提案も本当に価値があります。ありがとう... 画像はこちら

ここに画像の説明を入力

4

7 に答える 7

1

フィドル

マークアップは<div></div>

CSS

div:before
{
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 20px 40px 0 0;
    border-color: #63071e transparent transparent transparent;
}

div:after
{
    content: '';
    display: inline-block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 40px 20px 0;
    border-color: transparent #63071e transparent transparent;
    margin-left: -6px;
}
于 2013-08-19T12:14:29.070 に答える
0

以下が基本的な考え方です。どうやってするの。ただし、ポジショニングやマークアップをいじることはできます。

HTML

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

CSS

div {
     width: 0; 
     height: 0; 
     border-left: 0 solid transparent;
     border-right: 50px solid transparent;
     border-top: 20px solid #f00;
     position:relative;
}
span {
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent;
    border-right: 0 solid transparent;
    border-top: 20px solid #f00;
    position:absolute;
    top:-20px;
    left:50px;
}
于 2013-08-19T12:14:33.153 に答える
0 
.bottom {
width:50px;
border-bottom: 3em solid transparent;
border-left: 6.5em solid #efefef;
border-right: 6.5em solid #efefef;
border-top: 0;
}

フィドルのデモ

于 2013-08-19T12:10:20.397 に答える
0

これはググった？？

次のリンクを参照してください。

http://www.howtocreate.co.uk/tutorials/css/slopes

または少なくともここで尋ねられた質問を参照してください

CSS を使用してコーナーをカットする

于 2013-08-19T12:11:00.037 に答える
0 
<style>
.triangle { width:0px;
border-bottom: 30px solid transparent;
border-left: 60px solid #FF0000;
border-right: 60px solid #FF0000;
border-top: 0; }
</style>
<div class="triangle"></div>

デモはこちらhttp://jsfiddle.net/EfxEj/

于 2013-08-19T12:12:42.297 に答える