1

我想知道是否有一种方法可以将边框或轮廓属性仅适合 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>

谢谢你 ：）

4

2 回答 2

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

在响应中编辑：尝试创建一个 :after 重叠具有相似属性的 :before （除了定位“主要元素”相对和 :before 和 :after 绝对位置），然后使用 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/

于 2013-11-01T13:26:30.337 回答
0

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

于 2013-11-01T13:54:04.600 回答