參考《CSS揭祕》形狀部分
CSS揭祕pdf百度網盤 鏈接 提取碼: yg3v
圓
（橢）圓、半（橢）圓、1/4（橢）圓 寬高相等，顯示爲圓；寬高不等，顯示爲橢圓
border-radius: 10px 5px / 7px 10px 3px;
// 使用（/）單獨指定水平和垂直半徑;斜槓兩側值類似margin、padding用法,分別設置左上、右上、右下、左下
圓：
border-radius: 50%;
半圓:
上下半圓寬高2:1，左右半圓寬高1:2
border-radius: 50% / 100% 100% 0 0; //上半圓
border-radius: 50% / 0 0 100% 100%; //下半圓
border-radius: 100% 0 0 100% / 50%; //左半圓
border-radius: 0 100% 100% 0 / 50%; //右半圓
1/4 圓:
border-radius: 100% 0 0 0; //左上
border-radius: 0 100% 0 0; //右上
border-radius: 0 0 100% 0; //右下
border-radius: 0 0 0 100%; //左下
平行四邊形
使用transform變形
<div style="width: 100px; transform: skewX(-45deg); background: #aaaaaa ">test</div>
只讓容器的形狀傾斜，而保持其內容不變
方法1:
嵌套元素，對內容再應用一次反向的skew() 變形，抵消容器的變形效果
<div style="width: 100px; transform: skewX(-45deg); background: #aaaaaa ">
<div style="transform: skewX(45deg);">test</div>
</div>
方法2：
使用僞元素，把樣式放到僞元素上對其變形，此方式不影響內容.實際使用時發現只要上級元素中設置了background就會導致背景無法展示，這時候給元素加一個高度即可解決此問題
<body>
<style type="text/css">
.button {
position: relative;
/* 其他的文字顏色、內邊距等樣式…… */
}
.button::before {
content: ''; /* 用僞元素來生成一個矩形 */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: skew(-45deg);
}
</style>
<div class="button" style="width: 100px;">
test
</div>
菱形：
使用transform旋轉圖片
.picture {
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}
<div className='picture'>
<img src={image} alt=""/>
</div>
使用clip-path實現
.picture > img {
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
<div className='picture'>
<img src={image} alt=""/>
</div>
切角
使用CSS漸變實現斜面切角
background: #58a;
background:
linear-gradient(135deg, transparent 15px, #58a 0)
top left,
linear-gradient(-135deg, transparent 15px, #58a 0)
top right,
linear-gradient(-45deg, transparent 15px, #58a 0)
bottom right,
linear-gradient(45deg, transparent 15px, #58a 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
使用CSS漸變實現弧形切角
background: #58a;
background:
radial-gradient(circle at top left,
transparent 15px, #58a 0) top left,
radial-gradient(circle at top right,
transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right,
transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left,
transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
梯形:
把transform-origin 改成bottom left 或bottom right，就可以得到左側傾斜或右側傾斜的標籤頁。有一點需要注意 梯形角度依賴元素寬度，使用中要注意保持寬度一致才能獲得角度一致的梯形
<!DOCTYPE html>
<html>
<head>
<style>
.tab {
position: relative;
display: inline-block;
padding: .5em 1em .35em;
color: white;
}
.tab::before {
content: ''; /* 用僞元素來生成一個矩形 */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: perspective(.5em) rotateX(5deg);
transform: scaleY(1.3) perspective(.5em)
rotateX(5deg);
transform-origin: bottom;
}
</style>
</head>
<body>
<div class='tab'>div 元素。</div>
</body>
</html>
效果：
餅圖 ：
老實說不建議用css實現餅圖（SVG他不香嗎），但作爲一種方式學習還可以...
<!DOCTYPE html>
<html>
<head>
<style>
.pie {
position: relative;
width: 100px;
line-height: 100px;
border-radius: 50%;
background: yellowgreen;
background-image:
linear-gradient(to right, transparent 50%, #655 0);
color: transparent;
text-align: center;
}
@keyframes spin {
to { transform: rotate(.5turn); }
}
@keyframes bg {
50% { background: #655; }
}
.pie::before {
content: '';
position: absolute;
top: 0; left: 50%;
width: 50%; height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background-color: inherit;
transform-origin: left;
animation: spin 50s linear infinite,
bg 100s step-end infinite;
animation-play-state: paused;
animation-delay: inherit;
}
</style>
</head>
<body>
<div class="pie" style="animation-delay: -90s">11</div>
</body>
</html>
效果：
