使用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>

代码运行结果:

相关推荐
WebDesign_Mu9 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
Bellafu66614 小时前
selenium的css定位方式有哪些
css·selenium·tensorflow
我有一棵树15 小时前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
im_AMBER17 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父17 小时前
前端速通—CSS篇
前端·css
尘世中一位迷途小书童17 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源
Giant10018 小时前
小白也能懂的响应式布局:从 0 到 1 学会适配所有设备
css
银安19 小时前
CSS排版布局篇(8):Grid 二维布局
前端·css
华仔啊20 小时前
Vue3 登录页还能这么丝滑?这个 hover 效果太惊艳了
前端·css·vue.js
牧杉-惊蛰1 天前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js