使用clip-path polygon()画一个多边形

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。

polygon()定义一个多边形(使用一个 SVG 填充规则和一组顶点)。

关于polygon()参数坐标系

举个栗子,clip-path: polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%);,括号中的每对参数分别代表在坐标系中x轴和y轴的坐标,将这个栗子中的每个点画在坐标系中,就像下面这样

共五个点,分别为:

  • 0 0
  • 50% 20%
  • 100% 0
  • 100% 100%
  • 0 100%

将坐标系中每个点连接起来,形成一个闭合图形,如下图所示:

CSS实战

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .demo{
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      clip-path: polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%);
    }
  </style>
</head>
<body>
  <div class="demo"></div>
</body>
</html>

代码运行结果:

相关推荐
Predestination王瀞潞20 小时前
WEB前端技术基础(第三章:css-网页美化的衣装-上)
前端·css
冰暮流星21 小时前
css之box-sizing属性
前端·javascript·css
倚肆21 小时前
CSS ::before 和 ::after 伪元素详解
前端·css
小九今天不码代码1 天前
巧用 CSS linear-gradient 实现多种下划线文字特效(纯 CSS 无需额外标签)
css·css3·前端开发·linear-gradient·前端特效·下划线样式·文字特效
泷羽Sec-静安1 天前
Less-1 GET-Error based-Single quotes-String GET-基于错误-单引号-字符串
前端·css·网络·sql·安全·web安全·less
一只学java的小汉堡2 天前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
九皇叔叔2 天前
HTML与CSS基础入门:从语法到页面结构全解析
css·html·1024程序员节
_殊途2 天前
HTML-CSS项目练习
前端·css·html
β添砖java2 天前
vivo响应式官网
前端·css·html·1024程序员节
jingling5552 天前
CSS进阶 | 不用一行JS!用纯CSS打造会动的现代化单页应用(3D翻转卡片)
前端·javascript·css