css实现各种形状，三角形、切角、梯形、五边形、六边形、八边形、五角星

效果如下：

代码如下，注释很清晰。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>形状</title><style>* {margin: 0;padding: 0;}div {display: inline-block;}/* 三角形start */.traingle {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid yellowgreen;}/* 三角形 end */.mt-40 {margin-top: 40px;}/* .demo {background: green;width: 40px;height: 40px;padding: 40px;margin: 40px;border: 20px solid red;} */h1 {font-size: 24px;display: inline-block;}/* 切角 start */.notching {width: 40px;height: 40px;padding: 40px;background: linear-gradient(135deg, transparent 15px, yellowgreen 0) top left,linear-gradient(-135deg, transparent 15px, yellowgreen 0) top right,linear-gradient(-45deg, transparent 15px, yellowgreen 0) bottom right,linear-gradient(45deg, transparent 15px, yellowgreen 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;}/* 切角 end *//* 矩形两侧构造两个三角形就是梯形 */.traoezoid {position: relative;width: 60px;border-top: 60px solid yellowgreen;border-left: 40px solid transparent;border-right: 40px solid transparent;}/* 利用伪元素加旋转透视实现梯形 */.traoezoid-second {position: relative;width: 60px;padding: 60px;}.traoezoid-second::before {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;transform: perspective(20px) scaleY(1.3) rotateX(5deg);transform-origin: bottom;background: yellowgreen;}/* 梯形加上三角形 */.pentagon {position: relative;width: 60px;border-bottom: 60px solid yellowgreen;border-left: 40px solid transparent;border-right: 40px solid transparent;}.pentagon::before {content: "";position: absolute;top: 60px;left: -40px;border-top: 60px solid yellowgreen;border-left: 70px solid transparent;border-right: 70px solid transparent;}/* 六边形 */.hexagon {position: relative;width: 60px;border-bottom: 60px solid yellowgreen;border-left: 40px solid transparent;border-right: 40px solid transparent;}.hexagon::before {content: "";position: absolute;width: 60px;height: 0px;top: 60px;left: -40px;border-top: 60px solid yellowgreen;border-left: 40px solid transparent;border-right: 40px solid transparent;}/* 八边形 */.octagon {position: relative;width: 40px;height: 100px;background: yellowgreen;}.octagon::before {content: "";height: 60px;position: absolute;top: 0;left: 40px;border-left: 30px solid yellowgreen;border-top: 20px solid transparent;border-bottom: 20px solid transparent;}.octagon::after {content: "";height: 60px;position: absolute;top: 0;left: -30px;border-right: 30px solid yellowgreen;border-top: 20px solid transparent;border-bottom: 20px solid transparent;}/* 3个三角形叠加旋转在一起实现 */.star {margin: 50px 0;position: relative;width: 0;border-right: 100px solid transparent;border-bottom: 70px solid yellowgreen;border-left: 100px solid transparent;transform: rotate(35deg) scale(.6);}.star:before {content: '';position: absolute;border-bottom: 80px solid yellowgreen;border-left: 30px solid transparent;border-right: 30px solid transparent;top: -45px;left: -65px;transform: rotate(-35deg);}.star:after {content: '';position: absolute;top: 3px;left: -105px;border-right: 100px solid transparent;border-bottom: 70px solid yellowgreen;border-left: 100px solid transparent;transform: rotate(-70deg);}</style>
</head><body><h1>三角形</h1><div class="traingle"></div><h1>切角</h1><div class="notching mt-40"></div><h1>梯形1</h1><div class="traoezoid"></div><h1>梯形2</h1><div class="traoezoid-second"></div><h1>五边形</h1><div class="pentagon"></div><h1>六边形</h1><div class="hexagon"></div><hr class="mt-40"><h1>八边形</h1><div class="octagon"></div><h1>五角星</h1><div class="star"></div>
</body></html>

css实现各种形状，三角形、切角、梯形、五边形、六边形、八边形、五角星相关推荐

基于CSS mask和clip-path实现切角的技巧
本文翻译自 Tricks to Cut Corners Using CSS Mask and Clip-Path Properties,略有删改原作者:Temani Afif 我们最近使用CSS m ...
CSS图片裁剪：实现切角效果
img {border: 1px gray solid;width: 400px;height: 200px;clip-path: polygon(0 20px, 100% 0, 100% 100%, ...
css梯形+切角阴影效果
css梯形+切角阴影效果 .addIcon {width: 50px;height: 124px;background: #FFFFFF;//切角background: linear-gradient ...
html中切角文本框,css实现切角效果
1. 一个切角思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的 ...
css3切角文本框_[CSS揭秘]切角效果
将角切掉也是一种流行的设计风格传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果有了CSS3,我们完全可以使用新技术来实现第一种方案: CSS渐变需求一: 一个矩形需要切 ...
纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
html四边形的的框怎么编写,html知识点之利用css四边形切角并且加上边框
html知识点之利用css四边形切角并且加上边框 html知识点之利用css四边形切角并且加上边框前言这几个月做了很多前端工作,其中一个需求还是蛮头疼,UI给的图上面的四边形是一个带斜边的,直接用 ...
css实现平角切角和弧形切角效果
在web设计中,有时候会碰到一些切角的样式需求,实现方法有很多种,用图片也好,结点叠加覆盖也好,都可以实现切角的样式,这里笔者直接用css来实现切角的样式. 切单一角: background: #58 ...
html中切角文本框,HTML/CSS实现切角矩形效果
非纯色背景下切角矩形的效果图如下: HTML: CSS: .top-box { position: relative; display: block; width: 90%; min-height: ...

css实现各种形状，三角形、切角、梯形、五边形、六边形、八边形、五角星

css实现各种形状，三角形、切角、梯形、五边形、六边形、八边形、五角星相关推荐

最新文章

热门文章