带有两个切边的矩形 [英] Rectangle with two cut edges

问题描述

I不知道这个形状的具体名字是什么，但我可以把它称为半平行四边形吗？我想让这个形状纯粹使用CSS / CSS3 。任何帮助？或教程？

解决方案

您可以使用下面的伪元素。方法是从盒子的左下方和右上方切出一个三角形。这种方法可以与形状内的纯色图像一起使用，只要身体背景是纯色。当身体背景是非固体颜色时，这种方法不会工作，因为边框需要一个纯色背景。

这种方法的优点是它可以支持在每一侧具有不同角度的切口（类似于在任一侧上的三角形切口的斜边彼此不平行的问题）。

  div {background：red; width：200px; height：100px; position：relative;} div：before {position：absolute; height：0; width：0; content：''; border：20px solid white; border-color：透明透明白色; border-width：20px 0px 0px 15px; left：0; top：80px;} div：after {position：absolute; height：0; width：0; content：''; border：20px solid white; border-color：white white透明; left：170px; top：0px;}。with-img {background：url（http://lorempixel.com/100/100）;}  

 < div>< / div>< br>< div class =with-img>< / div>  
 

---

您还可以使用渐变效果实现类似效果。只有1个梯度就足以在两侧产生类似角度的切割。如果需要不同的角度，则应使用两个梯度。

  div {width ：200px; height：100px;位置：相对;}。与单梯度（背景：线性梯度（45度，透明5％，黄绿5％，黄绿90％，透明90.5％ （45deg，白色5％，透明5％，透明90％，白色90.5％），url（http://lorempixel.com/100/100）;}多重梯度图像（45deg，透明0％，透明90％，白色90％），线性梯度（60deg，白色10％，透明5％，透明100％），url（http://lorempixel.com/100/100 ）;}  

 < div class ='with-single -gradient'>< / div>< br>< div class ='with-single-gradient image'>< / div>< br>< div class = '>< / div>  

---

示例3：这也可以使用SVG创建，是最好的方法。它需要的只是一个路径元素，它创建所需的形状。

  < svg viewBox ='0 0 100 60'width ='200px'height ='120px'> < path d ='M0,0 80,0 100,16 100,60 10,60 0,54z'fill ='yellowgreen'/>< / svg>  

在Chrome v24，Firefox v19，Safari v5.1.7（Windows）和IE v10上测试。

注意：小于10的IE版本不支持< a href =http://stackoverflow.com/questions/3934693/gradients-in-internet-explorer-9>此SO线程。

I'm not sure what is specific name for this shape but can I just called it "half Parallelogram" ? I want make this shape purely using CSS/CSS3. Any help? or tutorial?

解决方案

You can do it using pseudo-elements like below. The approach is to cut out a triangle shape from the left-bottom and top-right of the box. This method can be used with either a solid color an image inside the shape as long as the body background is a solid color. When the body background is a non-solid color this approach will not work because the border hack needs a solid color background.

The advantage of this method is that it can support cuts of different angles at each side (like in the question where the hypotenuse of the triangular cut on either side are not parallel to each other).

div {
  background: red;
  width: 200px;
  height: 100px;
  position: relative;
}
div:before {
  position: absolute;
  height: 0;
  width: 0;
  content: ' ';
  border: 20px solid white;
  border-color: transparent transparent white white;
  border-width: 20px 0px 0px 15px;
  left: 0;
  top: 80px;
}
div:after {
  position: absolute;
  height: 0;
  width: 0;
  content: ' ';
  border: 20px solid white;
  border-color: white white transparent transparent;
  left: 170px;
  top: 0px;
}
.with-img {
  background: url(http://lorempixel.com/100/100);
}

<div></div>
<br>
<div class="with-img"></div>

---

Sample 2: You can also achieve a similar effect using gradients. Just 1 gradient is enough to produce a cut of similar angle on both sides. If different angles are required then two gradients should be used. However the multiple gradient approach mentioned here will not work when the body background is a non-solid color.

div {
  width: 200px;
  height: 100px;
  position: relative;
}
.with-single-gradient {
  background: linear-gradient(45deg, transparent 5%, yellowgreen 5%, yellowgreen 90%, transparent 90.5%);
}
.with-single-gradient.image {
  background: linear-gradient(45deg, white 5%, transparent 5%, transparent 90%, white 90.5%), url(http://lorempixel.com/100/100);
}
.with-multiple-gradient.image {
  background: linear-gradient(45deg, transparent 0%, transparent 90%, white 90%), linear-gradient(60deg, white 10%, transparent 5%, transparent 100%), url(http://lorempixel.com/100/100);
}

<div class='with-single-gradient'></div>
<br>
<div class='with-single-gradient image'></div>
<br>
<div class='with-multiple-gradient image'></div>

---

Sample 3: This can also be created using SVG and is the best method yet. All that it requires is just a single path element which creates the required shape.

<svg viewBox='0 0 100 60' width='200px' height='120px'>
  <path d='M0,0 80,0 100,16 100,60 10,60 0,54z' fill='yellowgreen' />
</svg>

Tested on Chrome v24, Firefox v19, Safari v5.1.7 (on Windows) and IE v10. They are older versions but should work in the latest versions also.

Note: IE versions less than 10 do not support gradients as mentioned in this SO thread.

这篇关于带有两个切边的矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！