Fit border/outline to visable css
Question
I was wondering if there is a way to fit the border or outline property to only the visable part of a div.
I want to put a border on a triangle i made, i have a fair grasp of jQuery too, but i would prefer to do it all in css out of stubbornness.
Here is my code:
<!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>
thank you :)
2 answers
solution1
1 ACCPTED 2013-11-01 13:26:30
Maybe this:
.trekant:before {
content:'';
border-top:0px solid;
border-right:41px solid;
border-bottom:101px solid;
border-left:41px solid;
position:absolute;
}
Could fiddle width the border-width and top / left properties.
Edit in Response: Try creating an :after overlapping a :before with similar properties (except position the "main element" relative and the :before and :after absolute) and then use jquery for legacy support. Just make sure the overlapping triangle is 1px wider and higher than the triangle underneath and position it negative. If that makes any sense.
like so:
<body><div><div class="triangle"></div></div></body>
an so:
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;
}
solution2
0 2013-11-01 13:54:04
我认为这是不可能的...该工具看上去http://apps.eky.hk/css-triangle-generator/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.