私はこのようになりますCSSの背景を作成しようとしています:角度の付いたCSSの背景に下の境界線があります。
私は形状を作成することができましたが、下の境界を追加する方法を見つけ出すことはできません、としています私のアプローチが問題になるかもしれないと考え始めた。
#top-background-flag {
border-top: 2px solid #C2C2C2;
background: linear-gradient(
to bottom right,
#5DCAD3 50%,
transparent 50.5%
)
no-repeat bottom, /* bottom part */
linear-gradient(100deg, #5DCAD3, #5DCAD3) no-repeat top;
/* top portion */
padding-bottom: 3.5rem;
border-bottom: 2px solid #C2C2C2;
background-size: 100% 3rem, 100% calc(100% - 3rem)
}
とHTML::
<div id=top-background-flag>
A fun title
</div>
とコードペン:
は、これまでのところ私は、次のCSSを持ってhttps://codepen.io/arel/pen/PKXGmd
私の問題は今、下の境界線があるということです私はそれがボックスの角度に従う方法を理解できません。ここで
は、私がこれまで持っているものです。
と遊ぶworking exampleです。あなたが最初に来たことに気付かなかった。あなたにチェックマークを付けました。 – Arel
彼はここでクレジットを求めるためにコメントして、彼は要求しているコメントを削除しました...あなたはそれが意味するものを自分で決定します – McHat
@McHat私は単に受け入れられた答えが私の答えからコピーされたものである理由を尋ねました。確かに彼は彼が好きな答えを選択するOPの決定、私はちょうど私が私からコピーされた答えを選択することを決めた理由を知りたいと思った。それで全部です。 – Dekel