html – css三角形>>

html – css三角形>>,第1张

概述我希望实现这样的目标 我怎么把这个三角形css .triangle{width: 0;height: 0;border-style: solid;border-width: 21px 42px 21px 0;border-color: transparent #eeeeee transparent transparent;line-height: 0px;_border-color: 我希望实现这样的目标

我怎么把这个三角形CSS

.triangle{wIDth: 0;height: 0;border-style: solID;border-wIDth: 21px 42px 21px 0;border-color: transparent #eeeeee transparent transparent;line-height: 0px;_border-color: #000000 #eeeeee #000000 #000000;_filter: progID:DXImagetransform.Microsoft.Chroma(color='#000000');    }

在我的标签的末尾做一个三角形? DEMO http://jsfiddle.net/p69qfqsx/

解决方法 列表的新CSS:

ul{    wIDth: 200px;    border: 1px solID #ccc;}li a{    background-color: #fff;    padding: 5px 10px;    display: block;    position: relative;    color: #666;    text-decoration: none;}li a:hover,li.active a{    background-color: #eee;}li a:hover:after,li.active a:after{  wIDth: 0;  height: 0;  border-top: 10px solID transparent;  border-bottom: 10px solID transparent;  border-right: 10px solID #fff;  /* background-color: #ddd; */  content: '';  position: absolute;  right: -2px;  top: 0;}

https://jsfiddle.net/p69qfqsx/2/

仅针对Chrome测试希望它有所帮助.

总结

以上是内存溢出为你收集整理的html – css三角形>>全部内容,希望文章能够帮你解决html – css三角形>>所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1079539.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-27
下一篇 2022-05-27

发表评论

登录后才能评论

评论列表(0条)

保存