我想知道是否有一种方法可以使边框或轮廓属性仅适合 div 的可见部分。
我想在我制作的三 Angular 形上加一个边框，我对 jQuery 也有一定的了解，但出于固执，我更愿意在 css 中完成这一切。
这是我的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>former</title>
<style type="text/css">
.trekant {
height:0px;
width:0px;
border-top:0px solid;
border-right:40px solid;/*controls angle of right corner*/
border-bottom:100px solid;/*controls bottom line width*/
border-left:40px solid;/*controls angle of left corner*/
border-color: transparent transparent #E6DD6E transparent;
margin:30px auto 0 auto;
outline:solid #000;
}
</style>
</head>
<body>
<div class="trekant">
</div>
</body>
</html>
谢谢你:)
最佳答案
也许是这样的:
.trekant:before {
content:'';
border-top:0px solid;
border-right:41px solid;
border-bottom:101px solid;
border-left:41px solid;
position:absolute;
}
可以调整 border-width 和 top/left 属性的宽度。
在响应中编辑:尝试创建一个 :after 与 :before 重叠并具有类似的属性(除了定位“主要元素”相对和 :before 和 :after 绝对)，然后使用 jquery 进行遗留支持。只要确保重叠的三 Angular 形比下面的三 Angular 形宽和高 1px，并将其定位为负值即可。如果这有意义的话。
像这样:
<body><div><div class="triangle"></div></div></body>
所以:
body > div {position:relative;width:50%;margin:20px}
.triangle:before {
content:'';
width:0;
height:0;
border-width:0 10px 10px 10px;
border-style:solid;
border-color:transparent transparent #ccc transparent;
z-index:2;
position:absolute;
left:0;
top:0;
}
.triangle:after {
content:'';
width:0;
height:0;
border-width:0 12px 12px 12px;
border-style:solid;
border-color:transparent transparent #000 transparent;
z-index:1;
position:absolute;
left:-2px;
top:-1px;
}
关于jquery - 使边框/轮廓适合可见的 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19727500/