今天，有個群友在群里提問，使用 CSS 能否實作下述這個圖形：
emmm，中間這個酷似三次貝塞爾曲線的造型，使用 CSS 不太好實作，我的建議是切圖實作，然而群友要求一定要用 CSS 實作，
雖然麻煩，但是這個圖形勉強也是能用 CSS 實作的，本文就將探討一下上述圖形的純 CSS 實作方式，并且從中進行一定的擴展延伸，
嘗試實作
這個圖形其實與我們的 Chrome Tab 按鈕非常類似，像是這樣：
不一樣之處在于，Chrome 的側邊其實是垂直的豎線，而上述的需求，側邊是一條斜線，
首先，我們快速看看這個 Chrome Tab 的互動應該如何實作：
我們對這個按鈕形狀拆解一下，這里其實是 3 塊的疊加：
只需要想清楚如何實作兩側的弧形三角即可，這里還是借助了漸變 -- 徑向漸變，其實他是這樣，如下圖所示，我們只需要把黑色部分替換為透明即可，使用兩個偽元素即可：
代碼如下：
<div ></div>
.outside-circle {
position: relative;
background: #e91e63;
border-radius: 10px 10px 0 0;
&::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
left: -20px;
bottom: 0;
background: #000;
background:radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
}
&::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
right: -20px;
bottom: 0;
background: #000;
background:radial-gradient(circle at 100% 0, transparent 20px, #e91e63 21px);
}
}
即可得到：
上述的所有圖形的完整代碼，你可以在這里看到：CodePen Demo -- CSS Various Button Shapes | CSS 各種造型按鈕
那么，問題來了，我們有沒有辦法，通過上述圖形，得到側邊兩條線是斜線的效果呢？
有了右邊的圖形，想要得到我們最終的效果不就手到擒來了么？像是這樣：
那么，怎么實作呢？其實也非常好做，這里利用了 CSS 3D 旋轉，形成了一種視覺上的景深效果，來實作側邊由豎直到斜邊的轉化，
看看代碼，其實就兩行代碼，在上述 outside-circle 的圖形基礎上：
- 設定一個適當的
perspective值 - 設定一個恰當的旋轉圓心
transform-origin - 繞 X 軸進行旋轉
代碼非常簡單，我們其實只需要這樣：
.outside-circle {
position: relative;
background: #e91e63;
border-radius: 10px 10px 0 0;
transform: perspective(40px) rotateX(20deg) ;
transform-origin: 50% 100%;
&::before { ... }
&::after{ ... }
}
核心在于這兩句：
transform: perspective(40px) rotateX(20deg)transform-origin: 50% 100%
制作一個影片，會更好理解一點：
是的，再復述一次，這里利用了 CSS 3D 旋轉，形成了一種視覺上的景深效果，來實作側邊由豎直到斜邊的轉化，
利用這個技巧實作梯形
通常，我們可以利用這個技巧，制作梯形，像是這樣：
.trapezoid{
position: relative;
width: 160px;
padding: 60px;
}
.trapezoid:before{
content:"";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transform:perspective(40px) scaleY(1.3) rotateX(5deg);
transform-origin: bottom;
background: deeppink;
}
效果如下：
還原題圖效果
好，理解了之后，還原題圖效果就很簡單了，我們只需要實作一邊的效果，再將整個圖形左移，利用父容器的 overflow: hidden 裁剪掉左邊部分，保留右邊即可，
完整的代碼如下：
<div >
<div ></div>
</div>
.g-container {
position: relative;
width: 300px;
height: 100px;
background: #2cb2e0;
border: 1px solid #277f9e;
border-radius: 10px;
overflow: hidden;
}
.g-inner {
position: absolute;
width: 150px;
height: 50px;
background: #fee6e0;
bottom: 0;
border-radius: 0 20px 0 20px;
transform: perspective(40px) scaleX(1.4) scaleY(1.5) rotateX(20deg) translate(-10px, 0);
transform-origin: 50% 100%;
&::before {
content: "";
position: absolute;
right: -10px;
width: 10px;
height: 10px;
background: inherit;
mask: radial-gradient(circle at 100% 0, transparent, transparent 9.5px, #000 10px, #000);
}
}
這樣，我們就完美的實作了題目的效果：
完整的在線示意，戳這里：CodePen Demo -- Unregular Border
最后
本文的目的更多的是介紹一種可行的小技巧，實際中實作上述的效果可能有更好的方法，譬如切圖？有更好的解法的，歡迎補充指正，
好了，本文到此結束，希望本文對你有所幫助 ??
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ，持續更新，歡迎點個 star 訂閱收藏，
如果還有什么疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544218.html
標籤：其他
下一篇：JS、PHP回車輸入替換