html向左箭头样式,html – CSS中的尖头/角度箭头样式边框

喜欢ヅ旅行 2022-10-07 15:55 89阅读 0赞

我正在制作面包屑菜单,并尝试在纯CSS中进行,因此我不必使用背景图像来获得箭头形状.是否有可能用纯CSS实现这种倾斜的边框风格？

我能做的最好看起来就像这样(这只是我刚才做的一个截图,所以请不要理会它意味着面包屑是水果和/或美味)：

我是这样用CSS实现它的：

.breadcrumb li \{

border-right: 2px solid \#ECECEC;

border-top-right-radius: 40px;

border-bottom-right-radius: 40px;

\}

这是整个CSS,如果有帮助：

div.breadcrumb \{

display: block;

float: left;

border-bottom: 2px solid gray;

\}

ul.breadcrumb \{

display: block;

float: left;

list-style-type: none;

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

\}

.breadcrumb li \{

float: left;

display: list-item;

background-color: \#F2F2F2;

border-right: 2px solid \#ECECEC;

border-top-right-radius: 40px;

border-bottom-right-radius: 40px;

position: relative;

padding: 9px 20px 10px 35px;

margin-left: -32px;

\}

.breadcrumb li.first-crumb \{

background: \#E7E7E7;

padding-left: 20px;

margin-left: 0px;

\}

.breadcrumb li.last-crumb \{

border-top: 1px solid \#E3E3E3;

border-right: 1px solid \#E3E3E3;

background: white;

padding-top: 9px;

padding-bottom: 9px;

border-top-right-radius: 0px;

border-bottom-right-radius: 0px;

\}

.breadcrumb li:not(.first-crumb) \{

padding-left: 45px;

\}

.breadcrumb li:not(.last-crumb) a:after \{

content: "\\27F6";

margin-left: 10px;

color: \#444444;

margin-right: 0px;

\}

.breadcrumb li a,

.breadcrumb li span \{

display: block;

float: left;

position: relative;

\}

.breadcrumb li a \{

text-decoration: none;

\}

.breadcrumb li.first-crumb a \{

padding-left: 0px;

margin-left: 0px;

\}

我的标记看起来像这样：

*  Produce
 *  Fruits
 *  breadcrumb-ilicious!

编辑：如果我能让它看起来像是一个真正的边界,那将是很好的.这是我的原始故事：

(我尝试根据奥拉夫的建议添加几个三角形,我唯一无法工作的是纠正两个三角形之间明显的间隙而不改变三角形的角度,以形成边界.)

发表评论取消回复

表情：

评论列表（有 0 条评论，89人围观）

还没有评论，来说两句吧...

相关阅读

相关 html h 好看的样式,html5 中有关 css3 样式

html5 中有关 css3 样式外部式 CSS 样式 (也可称为外联式) 就是把 css 代码写一个单独的外部文件中, 这个 css 样式文件以. css 为扩展名,

淡淡的烟草味﹌/ 2022年10月10日 02:33/ 0 赞/ 210 阅读

相关 html向左箭头样式,html – CSS中的尖头/角度箭头样式边框

我正在制作面包屑菜单,并尝试在纯CSS中进行,因此我不必使用背景图像来获得箭头形状.是否有可能用纯CSS实现这种倾斜的边框风格？我能做的最好看起来就像这样(这只是我刚才做的

喜欢ヅ旅行/ 2022年10月07日 15:55/ 0 赞/ 90 阅读

相关 html鼠标样式形状优化,鼠标箭头总变成放大镜样式，怎么恢复？

出现这样的问题，除鼠标指针设置外，主要是系统一时找不到要使用的文件。在桌面空白处右击鼠标-个性化-更改鼠标指针-将使用鼠标指针方案设为默认，用下边的办法清理优化电脑。一、打

朴灿烈づ我的快乐病毒、/ 2022年10月06日 05:55/ 0 赞/ 290 阅读

相关向上的箭头 html,jquery – 自定义HTML数字输入中向上/向下箭头的外观

是的,你可以(我只假设webkit)： input\[type=number\] \{ height: 30px; line-height: 30px; font-si

待我称王封你为后i/ 2022年10月06日 01:55/ 0 赞/ 104 阅读

相关 html5-css样式

案例效果： ![Center][] 样式实现： div{ width:400px;height:400px; border: 2

ゝ一纸荒年。/ 2022年08月21日 11:56/ 0 赞/ 190 阅读

相关 html_css字体样式

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <s

Dear 丶/ 2022年06月18日 05:19/ 0 赞/ 279 阅读

相关使用html+css实现简单的箭头

直接上代码： <div class="box"> <p>向上箭头</p> <div class="to_top"></div> <p>向左箭头</

拼搏现实的明天。/ 2022年06月05日 01:59/ 0 赞/ 1239 阅读

相关 HTML样式- CSS

http://[blog.csdn.net/pipisorry/article/details/78929649][blog.csdn.net_pipisorry_articl

布满荆棘的人生/ 2022年06月02日 01:29/ 0 赞/ 226 阅读

相关 ionic改变返回箭头样式

1.定义图标在theme目录下创建icons.scss专门定义图标 .ion-ios-backwhite \{ content: url("../assets/img

迷南。/ 2022年05月08日 00:12/ 0 赞/ 258 阅读

相关用css样式实现返回箭头

有问题可以扫码加我微信，有偿解决问题。承接小程序开发。微信小程序开发学习交流qq群 581478349；例图： ![20190225181054942.png]

ゝ一纸荒年。/ 2021年09月18日 03:42/ 0 赞/ 838 阅读