如何使用CSS設置從左下角到右上角的div第二種顏色？

Question

我正在為身份證標題設計兩個 div 塊。 我可以對兩者都使用漸變 colors，但漸變選項對此不利。

我想設計兩個塊

第一的-

可以看到，div塊中有兩個colors紅色和藍色。 從左下角到上角的藍色。

第二 -

還有另一個白色和紅色的 div 塊 colors。div 塊中的垂直白色。 我想像他們一樣設計兩個 div - 我正在像那樣創建 CSS -

.main-header
    {
      font-size:23px !important;color:#fff !important; text-shadow: 2px 0 red !important;
font-weight:900 !important; text-align:left;
font-family: 'Open Sans', sans-serif;
    border-left:solid blue;
    }

我怎樣才能得到准確的 output 和 CSS class 作為第一個和第二個 div 標題？

Answer 1

我使用linear-gradient()制作了您的設計。 檢查並告訴我這是否適合您。

 .block { color: #fff; font-size: 1.5rem; font-weight: bolder; width: 50%; padding: 10px 25px; text-align: center; }.first { background: linear-gradient(173deg, red 50%, blue 50%); text-transform: uppercase; }.second { background: linear-gradient(to right, red 1%, white 2%, red 3%, white 4%, red 5%, white 6%, red 7%, red 94%, white 95%, red 96%, white 97%, red 98%, white 99%, red 100%); text-transform: uppercase; }

 <div class="block first"> Delhi Crime News 24 </div> <br><br> <div class="block second"> Chief Editor </div>