css 实现反向圆角

源代码

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>test</title>
  </head>
  <body>
    <div class="container">
      <div class="circleAngle"></div>
    </div>
  </body>
  <style>
      *{
        margin: 0;
        padding: 0;
      }
      .container{
        width: 100%;
        height: 100vh;
        display: flex;
         
      }
      .circleAngle{
        width: 500px;
        height: 300px;
        border: 2px solid black;
        background-color: pink;
        /* border-radius: 5%; */
        background: radial-gradient(circle at left top,transparent 30px,green 0)left top,
        radial-gradient(circle at right top,transparent 30px,skyblue 0) right top,
        radial-gradient(circle at right bottom,transparent 30px,purple 0)  right bottom,
        radial-gradient(circle at left bottom,transparent 30px,orange 0) left bottom;
        /*径向渐变分别在四个角 初始透明连接处0表示从60像素开始就是这种颜色,没有过渡。 并设置四个角*/
        background-size: 50% 50%; /*每个背景图片宽度为50% 高度为50%*/
        background-repeat: no-repeat;/*背景图片不要重复*/
      }
      
   
  </style>
  <script src="1.js"></script>
</html>复制

效果

标签

css 实现反向圆角

【SpringMVC】_SpringMVC项目返回HTML与JSON

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

npm使用淘宝镜像下载依赖包

搭建Nexus前端npm私服，上传发布npm包和下载依赖

npm install包提示安装成功，但项目目录中没有出现node_modules的解决方案

解决VUE3 Vite打包后动态图片资源不显示问题

vue基于sockjs-client stompjs实现websocket客户端

Vue 3 项目中导入外部的＜link＞和＜script＞资源

前端哥

C#解析JSON的常用库--Newtonsoft.Json

jsonfield 项目常见问题解决方案

【SpringMVC】_SpringMVC项目返回HTML与JSON

BugJson因为json格式问题OOM怎么办

python 解读JSON文件，一文搞懂！

Redisson同时使用jackson、fastjson、kryo、protostuff序列化（含效率对比）

开源项目“Pretty JSON”安装与配置完全指南

2024年前端最新Nodejs基础之包管理工具npm(二)(2)，微软面试题及答案

解决全局安装pnpm后无法使用的问题

安装Nodejs后，npm无法使用

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

2024-03-03 11:03:011001

2
CSS常用属性（文本属性）

2024-11-04 09:11:111000

3
TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000

4
CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000

5
vue使用datav echarts

2024-09-06 00:09:381000

6
使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000

7
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

8
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

9
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

10
npm的使用

2024-08-18 00:08:131000

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>test</title>
	</head>
	<body>
	<div class="container">
	<div class="circleAngle"></div>
	</div>
	</body>
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	.container{
	width: 100%;
	height: 100vh;
	display: flex;

	}
	.circleAngle{
	width: 500px;
	height: 300px;
	border: 2px solid black;
	background-color: pink;
	/* border-radius: 5%; */
	background: radial-gradient(circle at left top,transparent 30px,green 0)left top,
	radial-gradient(circle at right top,transparent 30px,skyblue 0) right top,
	radial-gradient(circle at right bottom,transparent 30px,purple 0) right bottom,
	radial-gradient(circle at left bottom,transparent 30px,orange 0) left bottom;
	/径向渐变分别在四个角初始透明连接处0表示从60像素开始就是这种颜色,没有过渡。并设置四个角/
	background-size: 50% 50%; /每个背景图片宽度为50% 高度为50%/
	background-repeat: no-repeat;/背景图片不要重复/
	}


	</style>
	<script src="1.js"></script>
	</html>

css 实现反向圆角

微信扫一扫：分享