CSS之切出橫幅

上節分享了clip-path來實現乙個剪下橫幅，本節通過另外一種方式來實現乙個更經典的橫幅。

陰影分割合併

我們先看一下最終要實現的效果。

我們要實現這樣乙個效果，首先需要將其進行上下分割，上面為乙個紅色背景右邊有剪下三角且下邊帶陰影效果的樣式，下面是乙個黑色小三角。

為了實現這個效果，我們一步步分析，先從小三角入手。

為了更容易理解過程，將其拆分為以下幾步。

下面我們實現乙個，其寬度為50px，邊框為20px，這裡為了凸顯效果，左、上、右、下邊框的顏色分別設定為紅、綠、藍、橙。

 
CSS之切出橫幅
上節分享了clip path來實現乙個剪下橫幅，本節通過另外一種方式來實現乙個更經典的橫幅。陰影分割合併 我們先看一下最終要實現的效果。我們要實現這樣乙個效果，首先需要將其進行上下分割，上面為乙個紅色背景右邊有剪下三角且下邊帶陰影效果的樣式，下面是乙個黑色小三角。為了實現這個效果，我們一步步分析，先...
前端之css之單位
1.百分比 預設元素高度設定為100 以自身高度為準，如果父元素設定寬度，子元素寬度為父元素寬度。2.rem rem相對於html元素的font size屬性的大小而變化，需要由js 動態控制。3.vh,vw vw 可視區域的寬度，總寬度為100vw vh 可是區域的高度，總高度為100vh4.ca...
CSS之CSS概念記錄1
css的選擇器 1 子選擇器，即大於符號 用於選擇指定標籤元素的第一代子元素 food li 2 包含選擇器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側 編輯器中的 first span css的繼承 css的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某...