CSS 画三角形

1、transform: rotate + overflow: hidden

就是利用BFC的特性,在封闭的盒子里面,以图形的左下角(left bottom)作为旋转中心,进行旋转,把超出部分隐藏、

css 复制代码
.father {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: pink;
        transform-origin: left bottom;
        transform: rotate(45deg);
    }
}

2、clip-path 剪切

clip-path 可以将一个容器裁剪成任何我们想要的样子

css 复制代码
div {
    background: deeppink;
    clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}

3、border + transparent

设置一个宽高为0的盒子,用边框大小来控制三角形大小

transparent设置当前层级透明,显示底色

css 复制代码
div {
  width:0px;
  height:0px;
  border-width: 50px;
  border-style: solid;
  border-color: transparent #0099CC transparent transparent;
  transform: rotate(90deg);
}

如何设置了宽高就变成方形的环

通过旋转来显示不同的三角形

4、linear-gradient 线性渐变

css 复制代码
div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, yellowgreen);
}

不用渐变

css 复制代码
div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}

再设置透明

css 复制代码
div {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}

本文是从其他的学习到:http://t.csdnimg.cn/CV2Zi

相关推荐
光影少年6 分钟前
css优化都有哪些优化方案
前端·css·rust
BillKu14 分钟前
npm 安装命令中关于 @ 的讲解,如:npm install @vue-office/docx vue-demi
前端·vue.js·npm
yangzhi_emo27 分钟前
ES6笔记4
前端·笔记·es6
萌萌哒草头将军33 分钟前
Node.js v24.8.0 新功能预览!🚀🚀🚀
前端·javascript·node.js
超人不会飛36 分钟前
大模型应用 Vue H5 模板:快速落地流式交互与富文本渲染的开箱方案
前端·vue.js·github
用户4582031531737 分钟前
CSS无需JavaScript的交互效果实现
前端·css
影i39 分钟前
在 Vue + Codemirror 中优雅回显 JSON
前端
奇怪的前端740 分钟前
Alien-Signals 响应式系统
前端·vue.js
你单排吧1 小时前
Electron打包图标修改失败问题
前端
@AfeiyuO1 小时前
vue3 实现将页面生成 pdf 导出(html2Canvas + jspdf)
前端·pdf·vue