CSSで％幅の三角形を作りたい

Question

お世話になります。

CSSで％幅指定できる三角形を作りたいです。

.shape_triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50vw 100vh 50vw;
  border-color: transparent transparent #000 transparent;
}

％指定がどうしてもできなかったので
検索したところ、上記のような記述も出てきました。

しかし、両端にマージンのあるページに出力したいので
VWだとやりたいことができません。

やりたいこととしては、
divボックスを1100pxとして、そのdivボックスの中で
幅100％の三角形を作りたいです。

ご教授お願い致します。

教えていただいた通り、三角形が作れたので、
四角い箱を三角形で切り抜くようにしてみました。

ブラウザで確認すると、画像のように線が少し残ってしまいます。

これは、ブラウザ上しょうがないことなのでしょうか？

          <div class="shape_square">
            <div class="shape_triangle_left"></div>
            <div class="shape_triangle_right"></div>
          </div>

.shape_square {
	width: 100%;
	height: 120px;
	background-color: $font_color_accent;
	border: none;
	box-sizing: border-box;
	border-color: $font_color_accent;
	line-height:0;
	margin: 0;
	box-shadow: none;
	outline: none;
	position: relative;
}

.shape_triangle_left {
  height: 50px;
  width: 100%;
	background-color: #fff;
  clip-path: polygon(0% 0%, 0% 100%, 50% 100%);
  outline: none;
  line-height:0;
  margin: 0;
  box-shadow: none;
  border: #fff;
  position: absolute;
  bottom:0;
}

.shape_triangle_right {
  height: 50px;
  width: 100%;
	background-color: #fff;
  clip-path: polygon(50% 100%, 100% 0%, 100% 100%);
  outline: none;
  line-height:0;
  margin: 0;
  box-shadow: none;
  border: #fff;
  position: absolute;
  bottom:0;
}

Answer 1

IEに対応しなくていいなら clip-path を使ったらどうでしょう。

<div class="shape_triangle"></div>

.shape_triangle {
  height: 100vh;
  background-color: blue;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

CSS clip-path の使い方 / Web Design Leaves

Comments

[kens_Freelance]

ありがとうございます。やりたいことが出来ました。
さらに質問があるのですが、画像が貼れないので質問文に追記しました。
よければ教えていただければ幸いです。

[hatena19]

提示のHTML、CSSコードでは現象を再現できませんでした。
ただし、下辺に線が残りました。
リセットCSSを適用した消えました。

ただ、四角形の上に三角形を載せるというような複雑なことをせずに最初から5角形に切り抜けば簡単ですし、そのようなトラブルもないと思います。
<div class="shape_pentagon">
</div>

.shape_pentagon {
width: 100%;
height: 120px;
background-color: blue;
border: none;
box-sizing: border-box;
line-height:0;
margin: 0;
box-shadow: none;
outline: none;
clip-path: polygon(0 0, 100% 0, 100% 70px, 50% 100%, 0 70px);
}