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-widthand top/leftプロパティの幅をいじることができます。

Edit in Response: :after を作成して、同様のプロパティで :before をオーバーラップさせ (「メイン要素」の相対位置と :before および :after 絶対位置を除く)、レガシー サポートに jquery を使用してみてください。重なり合う三角形が下の三角形よりも 1 ピクセル広く、高いことを確認し、負の位置に配置します。それが理にかなっているなら。

そのようです：

<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 に答える