web-dev-qa-db-ja.com

CSSで角のあるコーナーを作成することはできますか？

純粋なCSSでこのシェイプを作成する方法があるかどうか疑問に思っています。この問題をさらに拡張するには、この形状で画像を内側にクリップする必要があります（マスクと考えてください。ただし、グレーの境界線が表示されている必要があります）。

enter image description here

または、これをcanvas/svgで作成した方が良いですか？

csscss3css-shapes
33
user2307706

境界線を維持するのは少し難しいですが、親コンテナ（：beforeと：afterはimgタグでは機能しません）で：beforeおよび：after要素を使用して、なんとか近い効果を達成することができました。

  1. コンテナに境界線を追加します

  2. 前を追加してコーナーをブロックし、-1オフセットして境界をカバーします

  3. 前からわずかにオフセットした後を追加して、カットオフ内に線を作成します

ご覧のとおり、45度の線の太さは少し問題です。

.cutCorner {
    position:relative; background-color:blue; 
    border:1px solid silver; display: inline-block;
}

.cutCorner img {
    display:block;
}

.cutCorner:before {
    position:absolute; left:-1px; top:-1px; content:'';
    border-top: 70px solid silver;
    border-right: 70px solid transparent;
}

.cutCorner:after {
    position:absolute; left:-2px; top:-2px; content:'';
    border-top: 70px solid white;
    border-right: 70px solid transparent;
}
<div class="cutCorner">
    <img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>

JSFiddle

33
Matt.C

デモを見る

border-widthおよびborder-colorとともにpseudoを使用してこれを行うことができます。以下のコードを参照して、その方法を確認してください。

HTML

<div class="cut"></div>

CSS

.cut {
    position:relative;
    width:500px;
    height: 200px;
    padding:20px;
    color:#000;
    background:#ccc;
}

.cut:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    border-width:30px 30px 0px 0px;
    border-style:solid;
    border-color:#fff transparent transparent #fff ;
}

このjQueryスクリプトを使用したクロスブラウザーサポートの別のソリューション。 ->http://jquery.malsup.com/corner/

ここのデモを参照

HTML

<div class="cut"></div>

CSS

.cut {
    position:relative;
    width:500px;
    height: 200px;
    padding:20px;
    color:#000;
    background:#ccc;
}

JS

$(".cut").corner("bevel tl 50px");
12
Vikas Ghodke

CSSを使用：

正確な形状は、CSSを使用して実現できます。アイデアは、左上隅にborder-radiusを持つ要素を用意し、それをY軸に沿って傾けてから、長方形の直前に配置することです。これらを行うと、長方形の要素の上部に三角形の切り込みがあり、1つの湾曲したエッジがあるように見えます。

シェイプの内側の部分に色（単色または透明）しかない場合は、1つの要素のみを使用して実現できます。ただし、形状内に画像を追加する必要がある場合（質問で述べたように）、画像のskew効果を逆にする必要があり、子なしでは実行できないため、複数の要素が必要です。素子。

.shape,
.shape-image {
  position: relative;
  height: 150px;
  width: 400px;
  border-bottom: 2px solid crimson;
  overflow: hidden;
}
.shape:before,
.shape:after,
.shape-image:after {
  position: absolute;
  content: '';
  top: 0px;
  height: 100%;
  z-index: -1;
}
.shape:before,
.shape-image .before {
  left: 0px;
  top: -2px;
  width: 50px;
  border: 2px solid crimson;
  border-width: 3px 0px 0px 2px;
  border-top-left-radius: 8px;
  transform-Origin: right bottom;
  transform: skewY(-45deg);
}
.shape:after,
.shape-image:after {
  left: 52px;
  width: calc(100% - 54px);
  border: 2px solid crimson;
  border-left: none;
}
.shape:after,
.shape:before {
  background: aliceblue;
}
.shape.semi-transparent:after,
.shape.semi-transparent:before {
  background: rgba(150, 150, 150, 0.5);
}
.shape-image .before {
  position: absolute;
  top: 0px;
  height: 100%;
  overflow: hidden;
}
.shape-image .before .img {
  height: 100%;
  width: 100%;
  border-top-left-radius: 8px;
  background: url(http://lorempixel.com/400/150);
  transform-Origin: right bottom;
  transform: skewY(45deg);
}
.shape-image:after {
  background: url(http://lorempixel.com/400/150);
  background-position: -50px 0px;
}

/* Just for demo */

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.shape{
  margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="shape"></div>
<div class="shape semi-transparent"></div>
<div class="shape-image">
  <div class="before">
    <div class="img"></div>
  </div>
</div>

SVGを使用：

代わりに、以下のスニペットのように、SVGを使用してより手間のかからない方法で同じことを実現できます。

.vector {
  height: 150px;
  width: 410px;
  padding-left
}
svg {
  height: 100%;
  width: 100%;
}
path {
  stroke: crimson;
  stroke-width: 2;
  fill: none;
}
polygon {
  fill: url(#bg);
}

/* Just for demo */

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='vector'>
  <svg viewBox='0 0 400 150' preserveAspectRatio='none'>
    <defs>
      <path d='M50,2 h 342 v144 h-390 v-90 a6,12 0 0,1 3,-9 z' id='p' />
      <clipPath id='clipper'>
        <use xlink:href='#p' />
      </clipPath>
      <pattern id='bg' width='400' height='150' patternUnits='userSpaceOnUse'>
        <image xlink:href='http://lorempixel.com/400/150' height='150' width='400' />
      </pattern>
    </defs>
    <polygon points='2,2 392,2 392,148 2,148' clip-path='url(#clipper)' />
    <use xlink:href='#p' />
  </svg>
</div>
<h3>Original Image</h3>
<img src='http://lorempixel.com/400/150' />

スクリーンショット：

enter image description here

10
Harry

これを行うことは可能ですが、CSS3ソリューションであるため、古いブラウザでは動作しません。

私がやったことは、2つのdivを作成したことです。1つは周囲に境界線があり、もう1つは下部にのみ境界線があります。 translateを使用して、そのdivを45度回転して他のdivのコーナーをマスクし、目的の効果を与えました。

[〜＃〜] html [〜＃〜]

<div class="holder">
    <div class="main"></div>
    <div class="corner"></div>
</div>

[〜＃〜] css [〜＃〜]

.holder { 
    position:relative;
    width: 180px;
    margin:30px
}

.main {
    width: 160px;
    height: 40px;
    border: 1px solid grey;
    position:absolute; 
    left:0;
    z-index: 1;
}
.corner { 
    border-bottom: 1px solid grey;
    width:30px; 
    height: 41px; 
    position:absolute;
    top:-25px;
    right:0;
    z-index:2;
    background:#fff;

    /* Safari */
    -webkit-transform: rotate(45deg);    
    /* Firefox */
    -moz-transform: rotate(45deg);    
    /* IE */
    -ms-transform: rotate(45deg);    
    /* Opera */
    -o-transform: rotate(45deg);
}

出力

Clipped corner

Fiddle を参照してください

3
ediblecode