5

<div>テーパードタグを実現しようとしています。つまり、片側が傾斜したエッジ (内側に傾斜) で、残りの 3 側すべてがストレート エッジです。

CSS と HTML だけでできるかどうかはわかりません。この問題をグーグルで検索してみましたが、解決策が見つかりませんでした。

私はもう試した：

-webkit-border-bottom-right-radius : 50px 650px;

私のdivの場合、650pxは全体の高さです。しかし、これにより、右下の位置の角が丸くなりますが、これは望ましくありません。皆さんがこの問題に対する答えを知っているか、少なくともこれに代わるものを提案してくれることを願っています.

4

2 に答える 2

7

これは、透明な境界線で実現できます。

CSS

#test1 {
  border-top: 100px solid red;
  border-bottom: 100px solid red;
  border-right: 100px solid transparent;

  width: 300px;
}

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

#test3 {
  border-top: 100px solid red;
    border-right: 50px solid transparent;
    height: 100px;
    width: 100px;

    content: 'ds';
  z-index: -1; /* make it the background */
}

#test3 .content {
    position: relative;
    top: -100px;
    margin: 5px;
    float: left; /* wrap the text */
    clear: left; /* for demo */
    font-size: 1em;
    background-color: cyan;
}

HTML

  <body>
    <div id="test1">
    </div>

    <br/>

    <div id="test2">
    </div>

    <br/>
    <div id="test3">
      <div class="content">
        Watch for the<br>
        new lines. <br>
        Do not overlap.
      </div>
    </div>
  </body>
于 2013-08-28T19:27:40.833 に答える
2

CSS リージョンはhttp://www.adobe.com/devnet/html5/articles/css3-regions.htmlのようです(「ラップ シェイプ」というセクションまでスクロールします)。形状を多角形として定義することができ、設定は完了です! 残念ながら、シェイプされた領域のサポートは現在制限されていますが、ユース ケースによっては機能する場合があります。

于 2013-08-28T19:21:51.430 に答える