css不规则圆角矩形

在这里插入图片描述

    <div class="skew"></div>复制

 .skew {
  position: relative;
  width: 120px;
 
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 40px;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    background: orange;
    transform: skewX(164deg);
    width: 100px;
    height: 100px;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 13px;
    width: 100px;
    height: 100px;
    border-radius: 20px;
    background: orange;
  }
}复制

这个收集的css 效果是真的多 https://github.com/chokcoco/iCSS强烈推荐

标签

css不规则圆角矩形

jQuery和CSS选择器的使用

「jQuery系列」jQuery插件介绍（遮挡面板Accordion、根据输入内容过滤/补全Autocomplete）

使用jQuery写一个注册界面

jQuery之scrollLeft()、scrollTop()

echarts5.0引入地图，背景渐变色，航线图，地图阴影

uniap 安卓/H5 使用echarts 常见问题解决

ECharts：一款超实用的基于JavaScript的数据可视化图表库

echarts饼图，鼠标移入扇区取消扇区放大效果

echarts 多y轴数据有负数导致0刻度线不对齐

Echarts配置系列-图文并茂教你配置渐变色面积图，折柱双图，环形图，仪表盘图等

前端哥

【JavaWeb】 JavaScript 开发利器之 jQuery

jQuery和CSS选择器的使用

JavaScript之jQuery番外篇【打地鼠游戏的制作讲解】(1)

HTML前端表单校验的方法

「jQuery系列」jQuery插件介绍（遮挡面板Accordion、根据输入内容过滤/补全Autocomplete）

使用jQuery写一个注册界面

Jquery 中封装的Ajax和封装函数serializeObject和nprogress 进度条插件

jQuery之scrollLeft()、scrollTop()

解决js文件使用ES6语法import...from...导入jquery出现的问题，使用webpack

JQuery中的事件对象，阿里一线架构师技术图谱

1
js数组常用方法（19种）|你会的到底有多少呢？

2024-04-08 11:04:211000

2
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011000

3
ECharts 饼状图颜色设置

2024-02-16 14:02:001000

4
echarts实现动态渲染多柱图

2024-02-12 14:02:341000

5
移动端css布局大全

2024-02-06 15:02:421000

6
使用HTML5和JS实现日期下拉框功能

2024-02-04 11:02:521000

7
JS生成条形码JsBarcode.all.js，转成图片canvas2image.js，并打印二维码jQuery.print.js

2024-01-27 01:01:181000

8
vue实现可输入可下拉选择的组件

2024-04-05 09:04:35999

9
echarts 图表，定时器实现数据实时动态

2024-03-13 00:03:28999

10
jQuery事件处理

2024-03-12 01:03:32999

	.skew {
	position: relative;
	width: 120px;

	&::after {
	content: "";
	position: absolute;
	top: 0;
	left: 40px;
	right: 0;
	bottom: 0;
	border-radius: 20px;
	background: orange;
	transform: skewX(164deg);
	width: 100px;
	height: 100px;
	}
	&::before {
	content: "";
	position: absolute;
	top: 0;
	left: 13px;
	width: 100px;
	height: 100px;
	border-radius: 20px;
	background: orange;
	}
	}

css不规则圆角矩形

微信扫一扫：分享