8

HTMLとCSSのみを使用して以下の湾曲した帆の形状を作成することは可能ですか？

帆の形

この回答から、次を使用してストレートサイドセイルを作成できることがわかります。

#triangle {
    width: 0;
    height: 0;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

これは次のようになります：

ストレートサイドセイル

または、境界線の半径を少し近づけることができます。

#sail {
    background: #ff0000;
    width: 50px;
    height: 100px;
    border-top-right-radius: 50px 100px;
    -moz-border-radius-topright: 50px 100px;
    -webkit-border-top-right-radius: 50px 100px;
    -khtml-border-radius-topright: 50px 100px;
}

これは次のようになります：

湾曲した帆の形

しかし、私が本当に望んでいるほどエレガントではありません。上部の帆のイメージは、穏やかでエレガントな曲線を描いています。

画像を使わずにもっとうまくやれるでしょうか？

4

2 に答える 2

3

私は自分自身を試してみますそれはあなたが望むかもしれません。

.sail{
    width: 50px;
    height: 100px;
    position:relative;
    overflow:hidden;
}
.sail:after{
    width:200px;
    height:200px;
    content:'';
    position:absolute;
    right:0;
    top:-5px;
    -moz-border-radius:100px;
    border-radius:100px;
    background: #ff0000;
}

これをチェックしてくださいhttp://jsfiddle.net/wtENa/

于 2012-04-05T09:19:46.333 に答える
0

radial-gradient()この形状を描画するために使用できます。

div {
  background: radial-gradient(200px at -50px 100%, red 50%, transparent 50%);
}


div {
  background: radial-gradient(200px at -50px 100%, red 50%, transparent 50%);
  height: 100px;
  width: 50px;
}
<div>

</div>

于 2016-12-23T15:24:23.427 に答える