CSS形成圆、平行四边形、菱形、梯形、饼图

最新推荐文章于 2024-08-07 23:26:25 发布

dk123sw

最新推荐文章于 2024-08-07 23:26:25 发布

阅读量926

点赞数

分类专栏： CSS 文章标签：圆平行四边形菱形切角梯形

本文链接：https://blog.csdn.net/dk123sw/article/details/102890993

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

参考《CSS揭秘》形状部分

CSS揭秘pdf百度网盘链接提取码: yg3v

圆

（椭）圆、半（椭）圆、1/4（椭）圆宽高相等，显示为圆；宽高不等，显示为椭圆

border-radius: 10px 5px / 7px 10px 3px;
// 使用（/）单独指定水平和垂直半径;斜杠两侧值类似margin、padding用法,分别设置左上、右上、右下、左下

圆：

border-radius: 50%;

半圆:

上下半圆宽高2:1，左右半圆宽高1:2

border-radius: 50% / 100% 100% 0 0; //上半圆
border-radius: 50% / 0 0 100% 100%; //下半圆
border-radius: 100% 0 0 100% / 50%; //左半圆
border-radius: 0 100% 100% 0 / 50%; //右半圆

1/4 圆:

border-radius: 100% 0 0 0; //左上
border-radius: 0 100% 0 0; //右上
border-radius: 0 0 100% 0; //右下
border-radius: 0 0 0 100%; //左下

平行四边形

使用transform变形

<div style="width: 100px; transform: skewX(-45deg); background: #aaaaaa ">test</div>

只让容器的形状倾斜，而保持其内容不变

方法1:

嵌套元素，对内容再应用一次反向的skew() 变形，抵消容器的变形效果

<div style="width: 100px; transform: skewX(-45deg); background: #aaaaaa ">
	<div style="transform: skewX(45deg);">test</div>
</div>

方法2：

使用伪元素，把样式放到伪元素上对其变形，此方式不影响内容.实际使用时发现只要上级元素中设置了background就会导致背景无法展示，这时候给元素加一个高度即可解决此问题

<body>
<style type="text/css"> 
.button {
    position: relative;
    /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
    content: ''; /* 用伪元素来生成一个矩形 */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(-45deg);
}
</style>

<div class="button" style="width: 100px;">
	test
</div>

菱形：

使用transform旋转图片

.picture {
    width: 400px;
    transform: rotate(45deg);
    overflow: hidden;
}
.picture > img {
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);
}
<div className='picture'>
    <img src={image} alt=""/>
</div>

使用clip-path实现

.picture > img {
   clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
<div className='picture'>
    <img src={image} alt=""/>
</div>

切角

使用CSS渐变实现斜面切角

background: #58a;
background:
linear-gradient(135deg, transparent 15px, #58a 0)
top left,
linear-gradient(-135deg, transparent 15px, #58a 0)
top right,
linear-gradient(-45deg, transparent 15px, #58a 0)
bottom right,
linear-gradient(45deg, transparent 15px, #58a 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;

使用CSS渐变实现弧形切角

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;

梯形:

把transform-origin 改成bottom left 或bottom right，就可以得到左侧倾斜或右侧倾斜的标签页。有一点需要注意梯形角度依赖元素宽度，使用中要注意保持宽度一致才能获得角度一致的梯形

<!DOCTYPE html>
<html>
<head>
<style> 
.tab {
    position: relative;
    display: inline-block;
    padding: .5em 1em .35em;
    color: white;
}
.tab::before {
    content: ''; /* 用伪元素来生成一个矩形 */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: perspective(.5em) rotateX(5deg);
    transform: scaleY(1.3) perspective(.5em)
    rotateX(5deg);
    transform-origin: bottom;
}
</style>
</head>
<body>

<div class='tab'>div 元素。</div>

</body>
</html>

效果：

饼图：

老实说不建议用css实现饼图（SVG他不香吗），但作为一种方式学习还可以...

<!DOCTYPE html>
<html>
<head>
<style> 
.pie {
    position: relative;
    width: 100px;
    line-height: 100px;
    border-radius: 50%;
    background: yellowgreen;
    background-image:
    linear-gradient(to right, transparent 50%, #655 0);
    color: transparent;
    text-align: center;
}
@keyframes spin {
    to { transform: rotate(.5turn); }
}
@keyframes bg {
    50% { background: #655; }
}
.pie::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 50%; height: 100%;
    border-radius: 0 100% 100% 0 / 50%;
    background-color: inherit;
    transform-origin: left;
    animation: spin 50s linear infinite,
    bg 100s step-end infinite;
    animation-play-state: paused;
    animation-delay: inherit;
}
</style>
</head>
<body>

<div class="pie" style="animation-delay: -90s">11</div>

</body>
</html>

效果：