css3 实现圆角的三角形

最新推荐文章于 2022-10-14 11:14:36 发布
最新推荐文章于 2022-10-14 11:14:36 发布
阅读量5.9k 收藏 8
点赞数 2
原文链接：https://segmentfault.com/a/1190000014730523
版权

达到的效果：

clipboard.png

今天碰到这样一个需求，为带有圆角的框加一个角标。而且角标是圆角的。
我真的不想切图，怎么办。突然想到css3可以实现条纹背景，那这不就可以了么

background: linear-gradient(45deg, transparent 50%, #61C4CF 0%);
background-size: 16px 16px;
border-top-right-radius: 3px;

三行代码解决问题，继续愉快的coding

weixin_33851429
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
带圆角的三角形
qi__lu的博客
06-24 1406
css 三角形
css圆角三角形3个圆角_CSS圆角
culuo8053的博客
07-30 1118
css圆角三角形3个圆角The ability to create rounded corners with CSS opens the possibility of subtle design improvements without the need to include images. CSS rounded corners thus save us time in creating im...
纯CSS实现一个三角形加圆角三角形
m0_57506941的博客
08-30 1987
效果图： 代码如下（注释有大概思路）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0.
css实现带圆角三角型的示例代码
09-27
主要介绍了css实现带圆角三角型的示例代码的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css：绘制一角是圆角的三角形
1111111111
05-06 1156
<template> <!-- 右上角带三角形的card --> <div style="width: 800px;margin: 20px auto;"> <a-card class="card"> <p>Card content</p> <p>Card content</p> <p>Card content</p> <div c.
CSS技巧之圆角背景与三角形实现方法
09-25
前端开发中两个很不错的小技巧, CSS三角形与圆角背景.
CSS3绘制六边形的简单实现
09-24
为了实现更多样化的设计，我们可以添加更多的CSS属性，如边框圆角、过渡效果或者阴影，以增加视觉吸引力。同时，通过更改伪元素的边框颜色，我们可以创建带有不同颜色边框的六边形，以区分不同的模块或功能。 总之...
css实现三角形及应用示例
03-18
5. **Triangle3.html** - 可能是更复杂的应用，如旋转的三角形、动画效果，或者是与其他CSS3属性（如阴影、圆角等）结合的示例。 6. **.project** - 这可能是一个项目文件，包含了所有示例的源代码和配置信息。 7....
纯CSS3实现几何爱心图形特效源码.zip
11-20
在这个"纯CSS3实现几何爱心图形特效源码.zip"压缩包中，包含了一个简单的使用指南和一个源码文件。 首先，我们来看CSS3如何构建几何爱心图形。爱心通常由两个相互旋转的三角形组成，每个三角形都是通过CSS3的`...
css如何画一个三边形,如何用css3画三角形和圆形
weixin_39534978的博客
08-04 347
通过CSS样式可以控制网页中各个元素的显示方式，通过CSS样式可以在网页中画出一个三角形，圆形等形状。(了解更多CSS知识，请学习CSS视频教程)CSS画三角形方法实现三角形的绘制很简单。第一步：新建一个元素，随便什么元素，不过我习惯性的会用块元素来做。如果行内元素就display:block它。第二步：为盒子添加样式。1.向上的三角形.kailong{width:0;height:0;borde...
CSS实现尖角加圆角
05-24
用CSS简单实现尖角和圆角，尖角和圆角组合在一起，DIV实现
css实现各种三角形（美人尖）
qq_45780380的博客
08-18 464
css实现各种三角形（美人尖） 1.倒三角形的实现（保留上边框）： div{ width:0px; height:0px; border-width:10px; border-style:solid; border-color:red transparent transparent transparent; } 效果： 2.正三角形的实现（保留下边框） div{ width:0px; height:0px; border-width:10p
CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画
聚娃科技开发者博客
11-22 680
最近一直在使用css-doodle实现一些 CSS 效果。 css-doodle 是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，以实现各种 CSS 效果（或许可以称之为 CSS 艺术）。后续几篇文章可能都会与之有关。 当然，本文的主角并不是 css-doodle。 CSS本身一直在快速发展更新，标准也与时俱进，各种新特性层出不穷，为了...
css 圆形 半圆 弧形 三角等
一只会喊666的咸鱼的博客
07-25 1204
首先，先规定一个div的样式 div { width: 200px; height: 200px; background-color: red; } 1.圆形 原理：四个角都是圆角：四个角的取值为50% .circle { border-radius: 50%; /*border-radius圆角的四个值按...
用css画三角形和圆形
SSophia的博客
08-06 325
1.这个是顶点向上的三角形. 2. 如果是顶点向下的三角形样式:border-width:28rpx 28rpx 0 28rpx (自定义边框的宽度) border-color:red transparent transparent 3.如果是顶点向左的三角形 border-width:28rpx 28rpx 28rpx 0 border-color:transparent red transparent 4.如果是顶点向右的三角形 border-width:28rpx 0 28rpx 28rpx
css之右上角带弧形的三角形标签文字45度倾斜显示
qq_43777572的博客
10-14 1818
css之右上角带弧形的三角形标签文字45度倾斜显示
使用CSS3制作各种形状
小白知浅的博客
01-23 720
使用CSS3制作各种形状 CSS3的一个非常酷的特性是允许我们创建各种规则和不规则形状的图形，从而可以减少图片的使用。以前只能在Photoshop等图像编辑软件中制作的复杂图形现在使用CSS3就可以完成了。通过使用新的CSS属性，像transform和border-radius，我们可以创建非常漂亮和复杂的图形效果。 圆形 圆形在设置CSS...
css圆角边框怎么设置
热门推荐
dageliuqing的博客
07-23 1万+
总结起来很简单，设置css圆角边框就是设置border-radius的值，设置的数字不同，圆角的大小也不同。通过设计css圆角边框，我们就不需要再用带框的背景图片，这不仅让页面设计更加简单，同时也有利于提升页面加载的速度。本文给大家简单介绍下css圆角边框怎么设置，大家可以参考，也可以直接拿过去使用，当然要修改下具体的参数。上面的css代码，大家可以直接拿去用，至于像15px、50px等这些数据，大家可以通过测试看看具体需要多大数字，这里给出的数字只是参考。圆角边框的最基本用法就是设置四个相同弧度的圆角。.
用CSS3特性直接绘图，半圆角，三角形，圆形等
liwusen的博客
02-25 5372
用CSS3特性直接绘图，半圆角，三角形，圆形等
css 有点圆角三角形角标
最新发布
08-17
CSS可以用border-radius属性来创建圆角，但是无法直接创建圆角三角形。不过，可以通过一些技巧和变通方法来实现这个效果。 一种方法是使用伪元素::before或::after来创建一个等腰三角形，然后通过设置边框和圆角来实现圆角三角形的效果。例如，可以给三角形的边框设置圆角属性，如border-radius: 50%。这样就可以创建一个圆角的三角形角标。 另一种方法是使用CSS的clip-path属性，通过定义一个自定义的路径来裁剪元素，从而实现圆角三角形的效果。可以使用polygon()函数或inset()函数来创建路径，然后指定圆角的半径。 需要注意的是，不同浏览器对于border-radius属性和clip-path属性的支持可能有所不同，有些浏览器可能需要使用相应的浏览器前缀来兼容。 总结起来，使用border-radius属性和伪元素::before或::after，或者使用clip-path属性，可以实现CSS中的圆角三角形角标。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [css-下拉菜单](https://download.csdn.net/download/qq_36091012/10894221)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [css圆角三角形3个圆角_CSS圆角](https://blog.csdn.net/culuo8053/article/details/107910747)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值