14

CSSで次の形状を作成するにはどうすればよいですか?

ここに画像の説明を入力してください

私はこれを解決策として試しました：

 .triangle:after {
        position:absolute;
        content:"";
        width: 0;
        height: 0;
        margin-top:1px;
        margin-left:2px;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid white;
    }

    .triangle:before {
        position:absolute;
        content:"";
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-bottom: 12px solid black;
    }

Triangleで動作していることがわかります。これは機能していますが、国境のトリックがあります。それを行うことができる別の方法はありますか？

SVG ベクトルを使用すると、これは簡単に実行できますが、それほど長くはしたくありません。

4

9 に答える 9

9

CSS 境界バージョン:

.triangle {
    position: relative;
    width:0;
    border-bottom:solid 50px black;
    border-right:solid 30px transparent;
    border-left:solid 30px transparent;
}
.triangle .empty {
    position: absolute;
    top:9px;
    left:-21px;
    width:0;
    border-bottom:solid 36px white;
    border-right:solid 21px transparent;
    border-left:solid 21px transparent;
}

黒い三角形の中に白い三角形を追加: http://jsfiddle.net/samliew/Hcfsx/

于 2013-04-26T07:58:22.943 に答える
7

使ってみてSVG

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
</svg>

チュートリアルはこちら

于 2013-04-26T07:46:11.510 に答える
4

ここで説明した方法を使用できます:この CSS 三角形はどのように機能しますか? 回転された疑似要素で。次に、回転した疑似要素に境界線を追加して、探している効果を作成できます。

この手法を使用して、画像、グラデーション、または無地でない背景の上に境界線のある三角形を表示することもできます。

デモ

.tr{
  width:40%;
  padding-bottom: 28.28%; /* = width / sqrt(2) */
  position:relative;
  border-bottom: 6px solid rgba(0,0,0,0.8);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  overflow:hidden;
}
.tr:before{
  content:'';
  position:absolute;
  bottom:0; left:0;
  width:100%; height:100%;
  border-top:6px solid rgba(0,0,0,0.8);
  border-left:6px solid rgba(0,0,0,0.8);
  
  -moz-box-sizing:border-box;
  box-sizing:border-box;
    
  -webkit-transform-origin:0 100%;
  -ms-transform-origin:0 100%;
  transform-origin:0 100%;
    
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* FOLLOWING JUST FOR THE DEMO */
body{background:url('https://picsum.photos/id/100/1000/1000');background-size:cover;}
<div class="tr"></div>

于 2015-03-25T11:09:57.680 に答える
3 

    .triangle{
        width:0;
        border-bottom:solid 30px black;
        border-right:solid 30px transparent;
        border-left:solid 30px transparent;
    }
    <div class="triangle">
    </div>

これは上向きの三角形になります。境界線を指す必要がある側に境界線を指定しないでください。

上は二等辺三角形です。border-left直角三角形になるように外します。

于 2013-04-26T07:47:07.293 に答える