目的
・脱borderによる装飾(三角を作る場合)
・デザイナーから共有される様々なあしらいに憤慨することなく、そつなく対応できるようにする
結論
・改めてclip-pathを使用した表現力の豊かさを知ったが、これのみで全てを実現させることは疑問が残った。
・あしらいには直線のみで形を作ったもの、直線と曲線で形を作ったものがあるが、複雑になればなるほど、それをcssのみで表現することに時間はかかる(AIありきであっても)。
・また上記の記述を残したファイルを次回確認する際、理解にも相当のコストがかかるため、少なくとも業務で関わるファイルではこの結論に基づいた作業方針に徹した方が負担が少なくよいと感じた。
※本記事におけるあしらいは、何かの図形のことを指しています。
結論から得た、今後の指標
・あしらいを着地点を確認後、作業方針は下記2点に分岐し作業を進めるものとする
1、シンプルな円形、正方形、長方形、三角形といった、比較的簡素な図形の場合
→clip-path+aspect-ratioによる可変対応を検討する。
2、直線と曲線が入り混じった図形の場合
→必要な箇所を画像で書き出し後、aspect-ratioで対応する。
具体的な方法
※要点のみのコード(抜粋)を下記に残す
▼clip-path + aspect-ratio
.triangle-deco-left::before {
top: 2px;
/*装飾部分の基本の横幅*/
width: auto;
height: 100%;
background-color: yellow;
/*x y,x y,...*/
clip-path: polygon(2px 50%, 100% 0%, 100% 100%);
aspect-ratio: 1 / 1.029;
}
.triangle-deco-left::after {
top: 0px;
width: auto;
height: 100%;
background-color: blue;
/*x y,x y,...*/
clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
z-index: -1;
aspect-ratio: 1 / 1.029;
}
▼画像 + aspect-ratio
.curve-deco-left::before,
.curve-deco-left::after {
content: "";
position: absolute;
transform: translateX(-100%);
left: 0;
}
.curve-deco-left::before {
top: 0px;
left: 0px;
width: auto;
height: 100%;
background:url(../img/hoge-curve.svg) no-repeat center center / contain;
aspect-ratio: 1 / 0.833;
}