是否可以在 CSS 中創建斜角？

Question

我想知道是否有任何方法可以用純 CSS 創建這種形狀。 為了進一步擴展這個問題，這個形狀需要在里面裁剪圖像（把它想象成一個蒙版——但是灰色的邊框必須是可見的）。

還是我最好在畫布/svg 中創建它？

Answer 1

保持邊界有點困難，但我設法使用帶有父容器的 :before 和 :after 元素實現了關閉效果（:before 和 :after 不適用於 img 標簽）

1. 為容器添加邊框

2. 添加一個 before 以遮擋一個角並偏移 -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

Answer 2

查看演示

您可以通過使用偽以及border-width和border-color來執行此操作，請參閱下面的代碼以了解如何完成。

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");

Answer 3

使用 CSS：

可以使用 CSS 實現精確的形狀。 這個想法是讓一個元素的左上角有一個border-radius ，沿 Y 軸傾斜它，然后將它定位在矩形之前。 這樣做會使矩形元素看起來好像在頂部有一個三角形切口，有一個彎曲的邊緣。

如果形狀的內部只有一種顏色（純色或透明），則可以僅使用一個元素來實現。 但是，如果需要在形狀內添加圖像（如問題中所述），那么我們需要多個元素，因為我們必須反轉圖像上的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' />

截屏：

Answer 4

可以這樣做，但它是一個 CSS3 解決方案，因此我認為不適用於舊版瀏覽器。

我所做的是，我創建了兩個 div，一個四周有邊框，另一個只有底部有邊框。 然后使用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);
}

輸出

見小提琴

Answer 5

有一個官方的襯里： clip-path 。 您可以使用此幫助網頁生成所需的形狀。

 .container{ display: flex; } .shape1{ height: 200px; width: 200px; clip-path: polygon(36% 0, 100% 0, 100% 100%, 0 99%, 0 31%); background-image: url("https://images.pexels.com/photos/12258844/pexels-photo-12258844.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); background-size:cover; } .shape2{ height: 200px; width: 200px; clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%); background-image: url("https://images.pexels.com/photos/12258844/pexels-photo-12258844.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); background-size:cover; } .shape3{ height: 200px; width: 200px; clip-path: polygon(31% 5%, 89% 0, 98% 35%, 63% 52%, 100% 71%, 57% 77%, 16% 100%, 24% 66%, 2% 35%, 51% 22%); background-image: url("https://images.pexels.com/photos/12258844/pexels-photo-12258844.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"); background-size:cover; }

 <div class="container"> <div class="shape1"></div> <div class="shape2"></div> <div class="shape3"></div> </div>

Answer 6

我有一個在線生成器，您可以從中輕松獲得這樣的形狀。 Select 您的配置，您將獲得clip-path值

 .box { display: inline-grid; position: relative; /* from the generator */ clip-path: polygon(0 102.00px,102.00px 0,100% 0,100% 100%,0 100%); }.box:before { content: ""; position: absolute; inset: 0; background: red; /* your border color */ /* from the generator*/ clip-path: polygon(0 102.00px,102.00px 0,100% 0,100% 100%,0 100%,0 102.00px,10px calc(102.00px + 4.14px),10px calc(100% - 10px),calc(100% - 10px) calc(100% - 10px),calc(100% - 10px) 10px,calc(102.00px + 4.14px) 10px,10px calc(102.00px + 4.14px)); }

 <div class="box"> <img src="https://picsum.photos/id/1069/400/250"> </div>