CSS形状做法：自适应椭圆、平行四边形、菱形

terry 2年前 (2023-09-27) 阅读数 74 #数据结构与算法

对于以下内容，我们假设不允许对结构层进行更改。

我们也尽量不添加额外的HTML来分离样式层和结构层。如果确实没有其他选择，我们将采取下一个最好的方法并添加额外的 HTML。

自适应椭圆

创建自适应椭圆是形状章节中最简单的形状，而且再简单不过了。众所周知，在创建与圆相关的图形时，使用的属性是edge-radius。我们知道，border-radius可以分别指定水平和垂直半径，使用斜杠（/）将它们分开。如果两个值相等，则可以创建圆弧。如果它们不相等，则将是椭圆弧。

.demo{
    border-radius: 100px / 75px;
}
复制代码

实际上，border-radius是一个简写属性。我们有两种方法为元素的每个角指定不同的值。

第一种缩写方式

.demo{
   border-radius:10px 20px 30px 40px / 50px 60px 70px 80px;
   /* 斜杠（/）前代表水平半径，后代表垂直半径，顺序分别为左上角开始，顺时针走向，所以这段代码表示左上角(10px/50px) 右上角（20px/60px）右下角（30px/70px）左下角（40px/80px） */
}
复制代码

第二种方式单独写

.demo{
    border-top-left-radius:10px/50px;
    border-top-right-radius:20px/60px;
    border-bottom-right-radius:30px/70px;
    border-bottom-left-radius:40px/80px;
}
复制代码

生成自适应椭圆是非常容易的，只要每个角的水平半径为宽度的50%，垂直半径为50%高就可以了。代码缩写为：

.ellipse{
    border-radius:50%;
}
复制代码

平行四边形

平行四边形也是页面上经常出现的图形类型。我们很容易想到使用 skew() 将矩形倾斜一定角度。

.parallelograms{
    transform: skew(-45deg);
    /*...... */
}
复制代码

可惜效果没有想象中的那么好，而且文字也歪了。此时，很容易想到使用句子结构层来向后倾斜内部文本。

<div class="parallelograms">
    <div>二十首情诗与绝望的歌</div>
</div>
复制代码

 .parallelograms{
    margin: 50px auto;
    max-width: 200px;
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color:#fff;
    background-color: #58a;
    transform:skew(-45deg);
}
.parallelograms div{
    transform: skew(45deg);
}
复制代码

不错，效果很好，但添加了额外的 HTML 元素。我们不会过多讨论它。接下来我们讨论第二种方式，使用伪元素来实现。这个时候，伪元素的好处就体现出来了。

想法：我们可以在第一种方法中使用伪元素作为辅助结构层，将所有样式（背景、边框等）应用到伪元素上，然后对伪元素进行变形以获得我们的平行四边形形状，形式内容不受影响，然后将伪元素位置z-index设置为-1，即可泄露文本内容。


 .parallelograms{
    margin: 50px auto;
    max-width: 200px;
    padding: 10px;
    line-height: 30px;
    text-align: center;
    color:#fff;
    position: relative;
}
.parallelograms:before{
    content:'';
    position: absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background-color: #58a;
    transform:skew(-45deg);
    z-index: -1;
}
复制代码

提醒：该技术不仅适用于skew()变形，还适用于任何其他变形样式。当我们想要使元素变形而不变形其内容时，可以使用它。。

菱形图像

当你看到这个形状时，你是否立即想到了上一段中的平行四边形制作？同样，您需要用

包裹图像，然后对其应用相反的 。 rotate()变形风格：

<div class="diamond">
    <img  alt="..." />
</div>
复制代码

.diamond {
    margin:30px auto;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    overflow: hidden;
    border: 1px solid red; /*为了更好的展示问题*/
}

.diamond img {
    max-width: 100%;
    transform: rotate(-45deg);
}

复制代码

但是老天并没有如愿！问题是，max-width:100%中的100%指的是宽度的100%，即400px。正方形旋转后，最长的边就是对角线，它是平方根宽度的两倍。当然，如果图像的宽度不够，我们可以使用scale()变形风格来放大图像。找到问题后，我们解决了，

代码如下：

.diamond {
    margin:30px auto;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    overflow: hidden;
    border: 1px solid red; /*为了更好的展示问题*/
}

.diamond img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
}
复制代码

这种方法需要额外一层HTML标签，这不是我们优先考虑的。同时，最大的问题之一是它只能处理方形图像，否则会失败。

我们在上一节中使用了伪元素技术，这里也可以使用它。代码如下：

 .diamond{
    margin:30px auto;
    width: 100px;
    height: 100px;
    overflow: hidden;
    position: relative;
    transform: rotate(45deg);
}
.diamond:before{
    content:'';
    position: absolute;
    left: 0;
    right:0;
    top:0;
    bottom:0;
    transform: rotate(-45deg) scale(1.42);
    background: url(https://avatars1.githubusercontent.com/u/8121621?v=4);
    background-size: cover;
}
复制代码

原理和上面使用结构层是一样的，所以我们面临同样的问题，只能处理正方形图像。

然后我们用一个更有用的方法来解决非正方形的图像。（切割路径图）" data-src="https://user-gold-cdn.xitu.io/2018/12/25/167e0f653ad7062e?imageView2/0/w/1280/h/960/format/ webp/ignore-error/1" height="20" data-width="376" data-height="214" />

转换代码：

.diamond{
    /*......*/
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
复制代码

clip-path 属性来自 svg 借用自上一章的平行四边形，后面的章节可以实现倒角、梯形等形状，只需要将坐标点按顺序排列即可，后面的章节我就不过多展示了，大家可以自己尝试一下

角点效果

角点效果，很容易想到我上一篇文章中你应该知道的内容《css揭秘》--背景和边框文章中条纹背景制作中使用的线性渐变线性-gradient()

我们可以轻松实现一个角被切掉的效果。代码如下：

.bevel-corners{
    background: #58a; /*linear-gradient不支持的情况下，作为代码回退机制*/ 
    background:linear-gradient(-45deg, transparent 15px, #58a 0);
}
复制代码

然后使用两层渐变背景就可以实现两个角被切掉的效果。

首先分析一下，默认情况下这两个渐变会填充整个元素，所以它们会互相重叠。我们需要把它们变小，所以我们使用background-size让每个渐变层只占据整个元素的一半面积，并将background-repeat设置为背景重复无重复。代码如下：

.bevel-corners{
    background: #58a;
    background:
    linear-gradient(-45deg, transparent 15px, #58a 0) right,
    linear-gradient(45deg, transparent 15px, #58a 0) left;
    background-size:50% 100%;
    background-repeat:no-repeat;
}
复制代码

同样的原理，我们将每一层渐变改为整个元素的四分之一。然后用四层渐变色，将四个角剪掉即可。

代码如下：

.bevel-corners{
    background:#58a;
    background:
    linear-gradient(-45deg,transparent 15px, #58a 0) bottom right,
    linear-gradient(45deg,transparent 15px, #58a 0) bottom left,
    linear-gradient(135deg,transparent 15px, #58a 0) top left,
    linear-gradient(-135deg,transparent 15px, #58a 0) top right;
    background-size:50% 50%;
    background-repeat:no-repeat;
}
复制代码

不断增加难度，实现圆弧角切割。原理是一样的。您只需将线性渐变更改为径向渐变即可。

实现代码如下：

.scoop-corners{
    background: #58a; 
    background:
    radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
    radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
    radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
    radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%; 
    background-repeat: no-repeat;
}
复制代码

简单饼图

实现最后一个图形——饼图（绿色是饼图，棕色是表示关系）

基于变换的解决方案思路：左边圆的右侧部分指定为上述两种颜色，然后用伪元素覆盖，并旋转以确定该扇区暴露了多少。

20%饼图的代码如下：

.pie {
    width: 100px; 
    height: 100px;
    border-radius: 50%; 
    background: yellowgreen;
    background-image:linear-gradient(90deg, transparent 50%, #655 0);
}
.pie:before { 
    content: '';
    display: block; 
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%; 
    background-color: inherit; 
    transform-origin: left;
    transform: rotate(.2turn);
}
复制代码

当旋转超过50%时，饼图变成下图这样，

然后我们可以将旋转后的伪元素的颜色反转并转动为棕色可以实现比例为50%-100%的饼图，

60%饼图的代码如下：

.pie:before { 
    content: '';
    display: block; 
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0 / 50%; 
    background-color: #655; 
    transform-origin: left;
    transform: rotate(.1turn);
}

作者：victor318x