CSSのみで斜めの境界

お世話になっております。

cssでの実装についてお伺いいたします。

 ___________________
｜      /            |
｜     /             |
｜    /              |
｜   /               |
｜  /                |
｜ /                 |
｜                   |
 ___________________

とCSSで実装しようとしております。

beforeで実装すれば良いのは理解出来るのですが
色は左がd2e 右がe6f

html
1<div class="news_deco61">
2hogehoge
3</div>

css
1.news_deco61 {
2	line-height:1.5em; 
3 	text-align:center;
4	background-color:#e6f;
5}
6
7.news_deco61:before {
8  content: "";
9  display: block;
10  height: 100%;
11  background: #d2e;
12  transform: skew(0,170deg) translate(0,20%);
13}

で出来そうだと思っているのですが
beforeで何も変化がありません。

グーグルさんで調査してみたのですが
見つけれる事が出来なかったためお伺いいたします。

上記斜めの境界をcssで実装するにはどのようにコーディングすればよろしいのでしょうか？

お忙しいところ大変申し訳ないのですが
上記お問い合わせいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

linear-gradient でグラデーション幅を固定値（pxとか）で指定して、角度もdegで指定すれば書いてあるような図はできると思います。

【linear-gradient() で斜線を表現する際のアンチエイリアス | フロントエンドエンジニアのblog | 有限会社Willさんいん】
https://www.will3in.co.jp/blog/article/antialiasing-linear-gradient-oblique-line/

【CSSできれいな斜め線 - Hail2u】
https://hail2u.net/blog/webdesign/antialiased-diagonal-line-with-css.html

【8ステップで完成！CSS3で「斜めのストライプ」を作る方法 | maesblog】
https://mae.chab.in/archives/2269

【CSS3でグラデーションを表現するlinear-gradientの使い方について。 | たくおのーと】
https://takuo4649design.com/weblog/note/archives/9482

投稿2017/08/01 07:33