CSS3实现三种切角效果（四边形少一个角）

小何同学要加油

已于 2023-04-19 14:32:06 修改

阅读量912

点赞数

文章标签： css3 css 前端

于 2023-04-18 16:46:15 首次发布

本文链接：https://blog.csdn.net/anony_me/article/details/130225566

版权

<div class="cornerCut"><div>

.cornerCut{
	width:200px;
	margin: 10px 20px;
	height: 200px;
	background:#58a;
	color:#fff;
	text-align: center;
	font-size:10px;
	background:linear-gradient(45deg,transparent 15px, #58a 0);

如图展示效果：
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小何同学要加油

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

CSS 实现切角效果

郊眠寺

05-24

2213

最近项目中看到这样的一个切角效果，如下所示就是一个正常的矩形，然后被“切”了一块，而且是沿着右上角切的。那么，这种布局如何实现呢？一、自适应方式这种布局一般有两种自适应方式，当然具体需要哪种可以根据实际设计师需求 1. 固定距离无论宽高怎么变化，切角距离顶部的距离是固定的，如下 2. 固定角度无论宽高怎么变化，切角与顶部的夹角是固定的，如下下面具体来看这两种布局的实现二、固定距离的切角固定距离的比较好实现，只需要借助 clip-path就可以了。假设距离顶部的距离是20px，那么四个点

CSS3实现三种切角效果

热门推荐

木子木木的专栏

09-10

1万+

效果一：代码：<div class="cornerCut">corner cutcorner cutcorner cutcorner cut</div> CSS： .cornerCut{ width:200px; margin: 10px 20px; height: 200px; background:#58a; color:#fff; text-...

参与评论您还未登录，请先登录后发表或查看评论

css之切角效果

weixin_41824429的博客

02-24

2691

一个切角 <div class="main"> <div class="box">切角效果</div> </div> <style> .box{ width: 200px; height: 120px; padding: 10px; color: white; background: #58a; backgroun

【css】实现切角

richest_qi的博客

09-06

2996

<body> <div class="box"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box5"></div> </body> div{ margin: 50px;

css 实现切角效果

fk129

06-14

421

在页面展示效果，时常用到切角展示这里效果的展示可以用切图的方式来实现；也可以用下面的css来实现 .qj{ width:100px; height:100px; background:linear-gradient(135deg, transparent 10px,rgba(7,9,103,0.8) 0) top left, linear-gradient(-135deg, t...

CSS 知识总结分享—— 踩坑记录——关于CSS切角的实现与踩坑解决（clip-path）

Sunnyyy_的博客

03-04

1737

关于CSS切角的实现与踩坑解决（clip-path）

css3实现缺角四边形_CSS3实现三种切角效果

06-06

可以使用 CSS3 的 clip-path 属性来实现缺角四边形和三种切角效果。 1. 缺角四边形 可以使用 polygon() 函数来定义多边形的形状，具体实现如下： ```css .element { width: 200px; height: 200px; background-...

css3实现缺角四边形_CSS3实现缺角矩形，折角矩形以及缺角边框

weixin_29129833的博客

12-23

1642

前言前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找ui小哥聊聊天，忽然灵光一闪，想起之前翻过的《css揭秘》一书，记得有这个篇章，遂有了此文。话不多说，放个效果图先缺角1. 伪元素实现.bg{width: 120px;height: 80px;background: #58a;} /* 下文元素都使用了此样式 */.cover{position: r...

CSS3实现各种图形的示例代码

09-24

在CSS3中，我们可以利用各种属性来创建丰富的图形，这些图形包括但不限于自适应的椭圆、运动的椭圆、半椭圆、平行四边形以及切角矩形等。以下是对这些图形实现方法的详细解释： 1. **自适应的椭圆**：使用`border...

CSS3来绘制一个3维立体游泳圈_使用css3绘制出各种几何图形

weixin_35775807的博客

12-23

224

1、圆形示例:思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：html:复制代码代码如下:css:复制代码代码如下:.size{width:200px;height: 200px;background: #8BC34A;}.example1{border-radius:100px;}2、自适应椭圆思路：border-radius 这个属性还有...

CSS3实现缺角矩形，折角矩形以及缺角边框

12-28

前言前几天偶然看到缺角矩形这个功能，脑袋中第一想法是，搞个绝对定位的伪元素，哪里需要挡哪里，或者找UI小哥聊聊天，忽然灵光一闪，想起之前翻过的《CSS揭秘》一书，记得有这个篇章，遂有了此文。话不多说，放个效果图先缺角 1. 伪元素实现 .bg{ width: 120px; height: 80px; background: #58a; } /* 下文元素都使用了此样式 */ .cover{ position: relative; } .cover::before { content: '';

Css3新特性应用之形状总结

09-24

本文将详细介绍CSS3中关于形状的一些关键应用，包括自适应椭圆、平行四边形、菱形以及切角效果。一、自适应椭圆通过`border-radius`属性，我们可以创建出自适应宽度的椭圆形元素。当给`border-radius`设置两个值...

html知识点之利用css四边形切角并且加上边框

小糖豆

09-14

4413

前言这几个月做了很多前端工作，其中一个需求还是蛮头疼，UI给的图上面的四边形是一个带斜边的，直接用背景图可以实现，但是会出现各种布局的问题，比如内容太大了，边框不会跟着扩大，废话不多说，这里写一些如何利用css话四边形带有斜边，并且给斜边加边框，在这之前，先简单说一下需要用到的函数 linear-gradient()函数 #grad { background-image: linear-gradient(red, yellow, blue); } 看上面的代码是从头部开始的线性渐变，从红色开始，转为

4.怎样使用css实现一个切角效果

banchixiang9107的博客

07-18

227

效果图用到的是css的linear-gradient，使用线性渐变来设置背景色首先设置一个圆角，先上HTML，就只是一个单单的容器 <div class="con"> hey,boy </div> 用点css美观一下 .con{ width: 200px; height: 120px;margin: ...

css3切角文本框_CSS3技巧之形状（切角效果） | 龙奔网

weixin_26765287的博客

12-23

243

上一小节给大家分享了平行四边形的实现方法，此时我们来说一下切角效果的实现方法。实现切角效果需要掌握的几个点包括：css渐变、background-size、条纹背景直角切角先实现一个简单的，比如让一个矩形，右下角切掉。实现该功能可以使用强大的渐变功能，有了渐变基础，应该不难理解。注：background: #58a不是必须的，加上它是为了将其作为回退机制。实现两个切角，左右下角各一个。一层渐变肯定...

css 切角实现（全）