56

この写真のような形を作りたい：

形

この写真のように三角形を作成し、マージンを右上に設定しましたが、写真のように左の div から分割されたように見せる方法がわかりません。

左の div を「カット」して灰色の境界線のままにし、緑色の三角形から分割して見えるようにする必要がありますか?

これを行う方法はありますか？

編集：

  1. ページで固定ナビゲーション バーを使用しているため、div が の場合にスクロールするとposition:absolute、ナビゲーション バーが div の後ろに移動します。
  2. ページの背景として画像を使用しているため、緑色の三角形と残りの div の間のスペースは透明にする必要があります。
4

4 に答える 4

6

overflow:hidden親の と組み合わせて、rotate 疑似要素を使用できます。

ここから、擬似を使用して右上に配置できます。これで準備完了position:absoluteです。

div {
  height: 250px;
  width: 300px;
  background: lightgray;
  border-radius: 10px;
  border: 5px solid dimgray;
  position: relative;
  overflow: hidden;
  margin: 30px auto;
}
div:before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  height: 100px;
  width: 100px;
  background: green;
  border: 5px solid dimgray;
  transform: rotate(45deg);
}

/***********FOR DEMO ONLY*******************/


html, body {
    margin:0;
    padding:0;height:100%;
    vertical-align:top;overflow:hidden;
    background: rgb(79, 79, 79);
    background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
}
<div></div>

于 2015-05-21T08:58:23.210 に答える