Question

我想知道是否有办法将边框或轮廓属性仅适用于div的可见部分。

我想在我制作的三角形上设置一个边框，我对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>

谢谢你：）

Answer 1

也许这个：

.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属性的宽度。

在响应中编辑：尝试创建：在重叠a：之后使用类似的属性（除了将“main element”相对位置和：before和：after absolute之外）然后使用jquery进行遗留支持。只需确保重叠的三角形比下方的三角形宽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;
}

http://jsfiddle.net/4hQ4z/

Answer 2

我认为这不可能......工具看起来 http://apps.eky.hk/css-triangle-generator/

使边框/轮廓适合可见的css

2 个答案: