4

css に少し問題があります。左上隅（角度が90度を超えるもの）が丸められた台形のdivが必要です。私はすでにこれを知っています：

HTML:

<div style="margin:30px">
  <div class="trapezoid">
  </div>
</div>

CSS:

.trapezoid{
  vertical-align: middle;
  border-bottom: 31px solid red;
  border-left: 25px solid transparent;
  height: 0;
  width: 150px;
}

台形を生成します。プロパティを試してみましたborder-top-left-radiusが、効果が十分ではありません。

上記のコードを使用した jsfiddle を次に示します。

コメントするだけで必要な情報がさらにあります。
前もって感謝します ：）

4

5 に答える 5

8

これを行う必要があるわけではありませんが、CSS 3d 変換を適用することで、単一の要素で角の丸い台形を作成することもできます。

.trapezoid {
  position: relative;
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.trapezoid:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: red;
  border-radius: 20px 0 0 0;
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -webkit-transform: perspective(400px) rotateX(45deg);
  -moz-transform:  perspective(400px) rotateX(45deg);
  -ms-transform: perspective(400px) rotateX(45deg);
  -o-transform: perspective(400px) rotateX(45deg);
  transform: perspective(400px) rotateX(45deg);
}

</p>

http://jsfiddle.net/RzJTP/

于 2012-10-03T16:36:58.177 に答える
7

/SVG を使用してこの形状を描画する方が良いと思いますが<canvas>、これはあなたが望むものに近いです:

.trapezoid{
    vertical-align: middle;
    border-bottom: 120px solid red;
    border-left: 200px solid transparent;
    border-top-left-radius:30px;
    height: 0;
    width: 150px;}

/* ---------- */

.trapezoid {
    position:relative;
}
.trapezoid:after {
    content:' ';
    left:-14px;
    top:-10px;
    position:absolute;
    background:red;
    border-radius:40px 0 0 0;
    width:164px;
    height:40px;
    display:block;
}

デモ: http://jsfiddle.net/n3TLP/20/

これは完璧ではありません。目的の寸法を得るには、数字をいじる必要があります。非常に厄介です。描画用のRaphaëlのようなものに興味があるかもしれませんが、CSS には (少なくとも意図的にではなく) 複雑な形状を処理する能力が実際にはありません。

于 2012-10-03T14:51:59.777 に答える
3

出来上がり：

CSS: 

.trapezoid{
    vertical-align: middle;
    background: red;
    padding-left: 200px;
    height: 120px;
    width: 150px;
    position: relative;
    border-top-left-radius: 40px;
    overflow: hidden;
    background-clip: content-box;
}

.trapezoid:after{
    content: '';
    margin-left: -100px;
    top: 0;
    height: 120px;
    background: red;
    transform: skew(-31deg,0deg);
    -o-transform: skew(-31deg,0deg);
    -ms-transform: skew(-31deg,0deg);
    -moz-transform: skew(-31deg,0deg);
    -webkit-transform: skew(-59deg,0deg);
    position: absolute;
    width: 1000px;
    border-top-left-radius: 40px;
}

デモ:
http://jsfiddle.net/n3TLP/24/

于 2012-10-03T16:05:13.343 に答える
3

これが私の試みです笑

.trapezoid{
    position:relative;
    border-bottom: 100px solid blue;
    border-right: 12px solid transparent;
    border-left: 180px solid transparent;
    width: 122px;
}

.trapezoid:before{
    content:' ';
    left:-184px;
    top:98px;
    position:absolute;
    background:blue;
    border-radius:80px 20px 80px 80px;
    width:318px;
    height:20px;
}


.trapezoid:after {
    content:' ';
    left:-11px;
    top:-7px;
    position:absolute;
    background:blue;
    border-radius:150px 50px 90px 0px;
    width:133px;
    height:30px;
}

<div style="margin:30px">
    <div class="trapezoid">
    </div>
</div>

http://jsfiddle.net/Bzj3h/

于 2012-12-09T03:39:22.417 に答える
2

Adobe Illustrator またはその他のソフトウェアを使用して図形を描画し、それを SVG コードとして保存するよりも、ページ上で直接 SVG を使用できますが、IE8 以前では無視されます。古いバージョンの IE をサポートする必要がある場合は、Raphael.js を使用して SVG 要素を描画できます。

Raphael Javascript ライブラリでの SVG ポリゴンのレンダリング

于 2012-10-03T15:02:35.993 に答える