12

歪ませることができることはわかっていますが、各コーナーを特定の角度で歪ませる方法がわかりません。

私が取り組んでいるプロジェクトは次のとおりです: http://map.ucf.edu/

特にメニュー内のタブを見てください。現在、画像を使用していますが、対応するブラウザ用に変更したいと思います。

CSS の trapazoidを作成できることはわかっていますが、それはコンテンツのない境界線を使用しています。最終結果には、少し丸みを帯びたコーナーも必要です。

編集：Zoltan Tothのソリューションから始めて、これを達成できました：デモ

div {
    height: 20px;
    padding:2px 5px 0 5px;
    color:white;
    background: rgba(0,0,0,.5);
    margin: 0 10px;
    position: relative;
    border-top-left-radius: 6px 4px;
    border-top-right-radius: 6px 4px;
    font-family:sans-serif;
    font-size:13px;
    line-height:20px;
    vertical-align:bottom;
    display:inline-block;
    white-space:nowrap;
}

div:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 19px solid rgba(0,0,0,.5);
    border-left: 9px solid transparent;
    position: absolute;
    bottom: 0;
    left: -9px;
}

div:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-bottom: 19px solid rgba(0,0,0,.5);
    border-right: 9px solid transparent;
    position: absolute;
    bottom: 0;
    right: -9px;
}

.b { background:black; margin:0 -7px 0 20px; }
.b:after, .b:before { border-bottom-color:black; }
4

2 に答える 2

14

可能です。大まかなアイデアは次のとおりです。

div {
    width: 200px;
    height: 100px;
    background: #ddd;
    margin: 20px 150px;
    position: relative
}

div:before {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid #ddd;
    border-left: 50px solid transparent;
    border-right: 50px solid #ddd;
    position: absolute;
    top: 0;
    left: -99px;
}

div:after {
    content: '';
    line-height: 0;
    font-size: 0;
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid #ddd;
    border-left: 50px solid #ddd;
    border-right: 50px solid transparent;
    position: absolute;
    top: 0;
    right: -99px;
}
<div>Hello</div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam cursus ex quis enim posuere auctor.</div>

于 2012-01-03T21:24:57.110 に答える
1

linear-gradient()長方形要素に台形を描くために使用できます。

このトリックは、図形全体をさまざまな部分に分割し、それぞれの図形を個別に背景に描画するというアイデアを使用しています。

div {
  background-image:
   linear-gradient(to bottom right, transparent 50%, silver 50%), /* draws left part */
   linear-gradient(to bottom left, transparent 50%, silver 50%), /* draws right part */
   linear-gradient(to right, silver, silver); /* draws central flat part */

  background-repeat: no-repeat;

  /* Sets the background size of each of three shapes individually */
  background-size: 75px 100%, 75px 100%, calc(100% - 150px) 100%;

  /* Sets the background position of each of three shapes individually */
  background-position: 0 0, 100% 0, 75px 0;
}


body {
  background: linear-gradient(orange, red) no-repeat;
  min-height: 100vh;
  margin: 0;
}

div {
  background-image: linear-gradient(to bottom right, transparent 50%, silver 50%),
    linear-gradient(to bottom left, transparent 50%, silver 50%),
    linear-gradient(to right, silver, silver);

  background-size: 75px 100%, 75px 100%, calc(100% - 150px) 100%;
  background-position: 0 0, 100% 0, 75px 0;
  background-repeat: no-repeat;

  padding: 20px 80px;
  min-height: 80px;
  width: 300px;
  margin: 25px;
}
<div>
  Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
</div>

<div>
  Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
</div>

于 2016-12-23T15:00:46.197 に答える