首页 > 其他分享 >利用 CSS 的 clip-path 属性快速画三角形、气泡框

利用 CSS 的 clip-path 属性快速画三角形、气泡框

时间:2023-10-20 16:25:18浏览次数:38  
标签:polygon clip 100% 10% 顶点 path CSS

clip-path 结合 polygon 函数,可以快速切出一个三角形、气泡框。


a. 三角形有三个顶点,因此 polygon 需要传三个参数,每个参数是顶点的 x 和 y 轴位置百分比:

#triangle-1 {
  -webkit-clip-path: polygon(50% 0, 100% 100%, 0 100%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

 

 顶点内部形状会被保留,顶点外部形状则会被隐藏掉。

 

 b. 同理快速画出个气泡框,一共七个顶点,polygon 需要传七个参数,每个参数是顶点的 x 和 y 轴位置百分比:

.container {
  width: 100px;
  height: 100px;
  background-color: aqua;
  -webkit-clip-path: polygon(0 10%,40% 10%,50% 0,60% 10%,100% 10%,100% 100%,0 100%);
  clip-path: polygon(0 10%,40% 10%,50% 0,60% 10%,100% 10%,100% 100%,0 100%);
}

 

标签:polygon,clip,100%,10%,顶点,path,CSS
From: https://www.cnblogs.com/caihongmin/p/17777377.html

相关文章

  • xxl-job执行java任务报错: unable to find valid certification path to requested tar
    1、错误:xxl-job调用https接口显示证书验证失败[错误信息:sun.security.validator.ValidatorException:PKIXpathbuildingfailed:sun.security.provider.certpath.SunCertPathBuilderException:unabletofindvalidcertificationpathtorequestedtarget]2023-10-2015......
  • CSS水平垂直居中
    使用flex布局<divclass="content"> <divclass="box"> </div></div>.content{height:100vh;display:flex;justify-content:center;align-items:center;}【注意】若垂直居中失效,是因为content盒子缺少高度,height:100%无法撑开盒子......
  • 使用CSS的cross-fade()实现基于url的网页背景图半透明显示
     参考链接:https://www.zhangxinxu.com/wordpress/2020/07/css-cross-fade-background-image-opacity/引子在开发过程中,碰到了一个比较特别的情况,就是使用url()背景图像,同时又希望background-image背景图片是半透明的,作为网页的半透明背景图,这时候使用opacity,如果使用某一个大......
  • css元素水平垂直居中
    1、单行文字的处理<html><head><style>/*要点,设置行高和DIV的行高一行*/#div{background-color:antiquewhite;height:100px;line-height:100px;text-alig......
  • Eclipse 插件 资料放在
    1,slave4j:http://code.google.com/p/slave4j/(没有用过,路过型)某某虾人写的:slave4j插件能帮你做什么?   搭建spring,springmvc,hibernate开发环境   代码生成:生成curd代码,包括jsp......
  • python sys.path介绍
    pythonsys.path介绍介绍当我们导入模块时,python解释器会通过sys.path中的环境变量搜索。sys.path是一个列表,里面包含已添加到环境变量中的路径。使用sys.path.append({路径})可以往里面添加自定义的环境变量。使用当我们想要导入某个文件中的文件失败时,可以将其文件夹路......
  • Java资源文件获取方法详解:从 Classpath 到 Web 应用程序
    在Java开发中,访问和读取资源文件是一个常见的需求。这些资源可以是配置文件、图像、音频、视频、文本文件等。在Java中,获取资源文件有多种方式,包括直接通过类路径(Classpath)访问,或者通过Web应用程序的上下文路径(ContextPath)访问。以下我们将详细探讨这些方法。通过类路径(Classpath)......
  • css 渐变与背景裁剪
    1.css的渐变 线性渐变/*线性渐变*/.one{width:300px;height:300px;background:linear-gradient(toright,rgb(244,239,239)2%,rgb(0,9,0)5%,rgb(244,239,239)9%);border:1pxsolidred;} <divclass="one"&g......
  • css多个元素一行排列的方法
    1、弹性盒子模型(FlexBox),不考虑兼容性问题的情况下,建议新手直接使用这种模式,简单,最重要的是元素不会浮动,不会影响后面的元素的布局,比如下面代码中的我在底层这个div的显示没有任何影响。<html><head><style>#tasklist{background-col......
  • 你也许不再需要使用 CSS Media Queries(媒体查询)了
    你也许不再需要使用CSSMediaQueries(媒体查询)了最近,CSS引入了一项新功能:ContainerQueries。它可以替代MediaQueries并实现MediaQueries无法胜任的任务。超越MediaQueries的功能让我们想象一个场景:在网页上有两列卡片。我们希望在卡片宽度较窄时,卡片内部呈上下布局......