箭头样式形成，斜切角的思路

最新推荐文章于 2024-09-13 16:13:46 发布

转载最新推荐文章于 2024-09-13 16:13:46 发布 · 130 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/doomjx/p/5775266.html

文章标签：

#javascript #ViewUI

本文介绍使用纯CSS实现直角箭头、圆角箭头及斜切角效果的方法。通过巧妙利用边界、旋转及背景渐变等属性，实现不同样式箭头与特殊形状的设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直角箭头：

.ra .ra:after{
content:" ";
display:inline-block;
width:0.6rem;
height:0.6rem;
border-width:0.2rem 0.2rem 0 0;
boeder-color:#cccccc;
transform:rotate(45deg);
position:absolute;
top:50%;
right:0;
margin-top:-4px;
}

圆角箭头：

.ra{
width:1.3rem;
height:1.3rem;
tranform:rotate(-45deg);
}

.ra:before{
right:0;
width:0.25rem;
height:1.3rem;
}

.ra:after,ra.before{
content:" ";
position:absolute;
background-color:#cccccc;
border-radius:0.2rem;
bottom:0;
}

斜切角思路:

.bevel{
border-right:1rem solid #ffffff;
border-bottom:1rem dashed transparent;
}

.bevel{
width:20rem;
height:20rem;
border:0.1rem solid #000000;
background:linear-gradient(-135deg,transparent 1.5rem,#655 0)top right;
}

--任何组织或个人分享、转载本博客内容，请务必以链接方式注明出处：来自博客园--下雨天的太阳（http://www.cnblogs.com/doomjx/）--
--请勿以任何形式修改内容（包括文字和图片）--

转载于:https://www.cnblogs.com/doomjx/p/5775266.html