css3 製做各類形狀的圖形
1、css3 僞元素
css3 中經常使用的僞元素：css
::first-line::first-letter::before::after::selection::placeholder
注意：html
按照規範，css3 中的僞元素的話，應該使用的是雙冒號（::）而不是單個冒號（:），可是，因爲舊版本的 W3C 規範並未對此進行特別區分，所以目前絕大多數的瀏覽器都同時支持使用這兩種方式來表示僞元素。css3
2、使用border-radius 製做圓角
- 半橢圓的實現方法
.border-radius {
width: 100px;
height: 100px;
background: skyblue;
border-radius: 100% 100% 0 0;
}
複製代碼
- 四分之一橢圓
實現的原理：web
要建立一個四分之一的橢圓，其中一個角的水平和垂直值都須要等於100%，而其餘三個角都不能設爲圓角。瀏覽器
具體的代碼：佈局
.border-radius {
width: 100px;
height: 100px;
background: skyblue;
border-radius: 100% 0 0 0;
}
複製代碼
具體的效果：ui
3、css3 畫三角形和對話框
若是咱們把一個盒子把寬度和高度分別設置爲0，而後用邊框填充的方式，那麼咱們獲得的是什麼？spa
.triangle {
width: 0;
height: 0;
margin: 50px auto;
border-top: 50px solid red;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-left: 50px solid purple;
}
複製代碼
獲得的效果爲：3d
如今有一個想法就是，咱們把任意一邊邊框的顏色設置爲透明色，獲得的效果是怎樣的？code
.triangle {
width: 0;
height: 0;
margin: 50px auto;
border-top: 50px solid transparent;
border-right: 50px solid green;
border-bottom: 50px solid blue;
border-left: 50px solid purple;
}
複製代碼
獲得的效果以下：
若是咱們把任意兩邊都設置爲透明色的話，獲得的效果又是怎樣的呢？
.triangle {
width: 0;
height: 0;
margin: 50px auto;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid blue;
border-left: 50px solid purple;
}
複製代碼
最終咱們獲得的是一個直角三角形：
若是咱們想獲得一個三角形的話，具體的實現又是怎樣的呢？設置任意三邊都爲透明色，咱們來看一下具體的代碼。
.triangle {
width: 0;
height: 0;
margin: 50px auto;
border-top: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid purple;
}
複製代碼
若是咱們想要不一樣方向的三角形，那麼咱們就把其餘的方向上的三條邊都設置爲透明色，最終就能夠獲得你想要的三角形的了。
最後獲得的效果：
終極boss,咱們利用三角形怎樣寫一個對話框呢？
- 首先第一步就是設置對話框的邊框
<div class="dialog"></div 複製代碼
.dialog {
width: 200px;
height: 50px;
background: skyblue;
border-radius: 10px;
}
複製代碼
獲得的效果：
三角形咱們應該怎樣設置的呢？在css3 中，爲咱們提供了僞元素，::before 和 ::after 這兩個僞元素，因此設置三角形，咱們就把它交給僞元素。
.dialog::before {
content: '';
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 10px solid skyblue;
border-bottom: 10px solid transparent;
}
複製代碼
獲得的效果：
4、平行四邊形和菱形的實現
菱形的實現的原理就是使一個正方形旋轉45度就能夠獲得一個菱形，具體的代碼以下：
.diamond {
width: 100px;
height: 100px;
margin: 100px auto;
background: skyblue;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
複製代碼
獲得的效果：
平行四邊形實現的原理： 首先咱們須要設置一個普通的四邊形，而後經過transform: skewX(-45deg)，可獲得一個平行四邊形。
<a href="#" class="button">
<div>clike me</div>
</a>
複製代碼
.button {
display: block;
width: 100px;
height: 50px;
line-height: 50px;
margin: 100px auto;
transform: skewX(-45deg);
-webkit-transform: skewX(-45deg);
-moz-transform: skewX(-45deg);
-ms-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
background: skyblue;
font-size: 14px;
color: #fff;
text-decoration: none;
text-align: center;
}
.button > div {
transform: skewX(45deg);
}
複製代碼
注意：
怎樣讓容器進行傾斜，而內容不進行傾斜的，主要的解決的方案的話，就是再應用一次反向的skew() 變形，從而抵消掉容器的變形效果，具體的代碼以下：
.button > div {
transform: skewX(45deg);
}
複製代碼
最後獲得的效果：
5、css3實現五角星和六角星
五角星的實現的原理的話，主要就是利用三個三角形進行拼接而成的
首先咱們先製做第一個三角形，而後其餘的兩個三角形的話，咱們能夠採用僞元素的方式來製做。
- 製做第一個三角形，主要就是設置左右兩邊的邊長大一些，而後三角形就會頓一些，而後利用
css3中的transform: rotate()的旋轉角度的方式將其進行旋轉，就獲得一個三角形。
#star {
width: 0;
height: 0;
border-bottom: 70px solid red;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
複製代碼
- 第二個三角形的製做 第二個三角形的話，主要採用 僞元素 + 定位 + 旋轉
#star::before {
content: '';
position: absolute;
top: -45px;
left: -65px;
width: 0;
height: 0;
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
複製代碼
- 第三個三角形的製做 第三個三角形和第一個三角形制做的方法是同樣的，只不過旋轉的角度不同而已。
#star::after {
content: '';
position: absolute;
top: 3px;
left: -105px;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform: rotate(-70deg);
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
複製代碼
所有實現的代碼：
#star {
width: 0;
height: 0;
border-bottom: 70px solid red;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star::before {
content: '';
position: absolute;
top: -45px;
left: -65px;
width: 0;
height: 0;
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star::after {
content: '';
position: absolute;
top: 3px;
left: -105px;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
transform: rotate(-70deg);
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
複製代碼
六角形的實現原理就是利用兩個三角形進行佈局的，一個正三角，另外一個旋轉180。
首先咱們來製做第一個三角形：
#star {
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
複製代碼
最終獲得的效果：
第二個三角形，就是在第一個圖形的基礎上，把border-bottom 改成border-top 便可，而後經過定位的方式，將其放在適當的位置：
#star::after {
content: '';
position: absolute;
top: 30px;
left: -50px;
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
複製代碼
獲得的效果：
完整代碼以下：
#star {
position: relative;
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
#star::after {
content: '';
position: absolute;
top: 30px;
left: -50px;
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
複製代碼
6、 css3 製做五邊形和六邊形
製做五邊形的原理就是利用一個正三角形+一個梯形
那咱們怎樣來製做一個梯形呢？咱們製做三角形的時候，是把寬高分別設置爲0，而後利用邊框進行填充，就獲得了一個個三角形，其實梯形的製做原理就是其基礎上，設置寬高，就能夠獲得一個梯形。
- 若是把寬高設置爲0，獲得的是三角形。
#trapezoid {
position: relative;
width: 0;
height: 0;
border-top: 100px solid green;
border-bottom: 100px solid red;
border-right: 100px solid blue;
border-left: 100px solid yellow;
}
複製代碼
- 設置寬高值，獲得的是一個梯形。
#trapezoid {
position: relative;
width: 50px;
height: 50px;
border-top: 100px solid green;
border-bottom: 100px solid red;
border-right: 100px solid blue;
border-left: 100px solid yellow;
}
複製代碼
獲得的效果：
- 五邊形的製做
五邊形的製做原理，就是利用一個三角形+一個梯形組成的
首先梯形的製做：
#trapezoid {
position: relative;
width: 100px;
height: 0;
border-top: 100px solid skyblue;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
複製代碼
再者三角形的製做：
#trapezoid::before {
content: '';
position: absolute;
top: -200px;
left: -50px;
width: 0;
height: 0;
border-bottom: 100px solid skyblue;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
}
複製代碼
最後的效果圖：
完整示例代碼：
#trapezoid {
position: relative;
width: 100px;
height: 0;
border-top: 100px solid skyblue;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
#trapezoid::before {
content: '';
position: absolute;
top: -200px;
left: -50px;
width: 0;
height: 0;
border-bottom: 100px solid skyblue;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
}
複製代碼
- 六邊形的製做
六邊形的製做原理還蠻簡單的，就是利用兩個三角形+一個正方形，就能夠製做一個六邊形。
首先咱們先製做一個正方形：
#hexagon {
position: relative;
width: 100px;
height: 55px;
background: skyblue;
}
複製代碼
獲得的效果圖：
兩個三角形的製做：
#hexagon::before {
content: '';
position: absolute;
top: -25px;
width: 0;
height: 0;
border-bottom: 25px solid skyblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#hexagon::after {
content: '';
position: absolute;
top: 55px;
width: 0;
height: 0;
border-top: 25px solid skyblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
複製代碼
獲得的六邊形的效果：
實例的代碼：
#hexagon {
position: relative;
width: 100px;
height: 55px;
background: skyblue;
}
#hexagon::before {
content: '';
position: absolute;
top: -25px;
width: 0;
height: 0;
border-bottom: 25px solid skyblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
#hexagon::after {
content: '';
position: absolute;
top: 55px;
width: 0;
height: 0;
border-top: 25px solid skyblue;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
複製代碼
7、css3 畫心形和蛋形
心形的製做就是兩個長方形進行組合，而後頭部能夠用border-radius 設置爲圓角。
第一個長方形：
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart::before {
content: '';
position: absolute;
left: 50px;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 40px 0 0;
-webkit-border-radius: 50px 40px 0 0;
-moz-border-radius: 50px 40px 0 0;
-ms-border-radius: 50px 40px 0 0;
-o-border-radius: 50px 40px 0 0;
transform-origin: 0 100%;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
複製代碼
第二個長方形：
.heart::after {
content: '';
position: absolute;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 40px 0 0;
-webkit-border-radius: 50px 40px 0 0;
-moz-border-radius: 50px 40px 0 0;
-ms-border-radius: 50px 40px 0 0;
-o-border-radius: 50px 40px 0 0;
transform-origin: 100% 100%;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
複製代碼
獲得的效果：
完整的實例代碼：
.heart {
position: relative;
width: 100px;
height: 90px;
}
.heart::before {
content: '';
position: absolute;
left: 50px;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 40px 0 0;
-webkit-border-radius: 50px 40px 0 0;
-moz-border-radius: 50px 40px 0 0;
-ms-border-radius: 50px 40px 0 0;
-o-border-radius: 50px 40px 0 0;
transform-origin: 0 100%;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.heart::after {
content: '';
position: absolute;
width: 50px;
height: 80px;
background: red;
border-radius: 50px 40px 0 0;
-webkit-border-radius: 50px 40px 0 0;
-moz-border-radius: 50px 40px 0 0;
-ms-border-radius: 50px 40px 0 0;
-o-border-radius: 50px 40px 0 0;
transform-origin: 100% 100%;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
複製代碼
雞蛋的實現： 雞蛋的實現的原理就是一個長方形 + css3的border-radius 屬性設置一個圓，而後border-radius 利用 / 設置不一樣的形狀的大小。
.egg {
width: 126px;
height: 180px;
background: #fa0;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-webkit-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-moz-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-ms-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
-o-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
複製代碼
最終的實現效果：
8、css3 畫太極陰陽圖
畫太極陰陽圖的第一步就是畫一個橢圓 + 黑白兩邊的話，能夠加上border-left 這個屬性
相關文章
- 1. CSS3製做各類形狀圖像
- 2. CSS3繪製各類形狀
- 3. css繪製各類各樣的形狀圖形
- 4. CSS 繪製各類形狀
- 5. *各類形狀
- 6. css3激發想象/css3各類圖形
- 7. CSS各類形狀
- 8. css繪製各類形狀圖形（第二版）
- 9. css3實現小箭頭，各類圖形
- 10. Android使用shape繪製各類形狀
- 更多相關文章...
- • R 繪圖 - 條形圖 - R 語言教程
- • 圖形數據庫是什麼？ - NoSQL教程
- • 漫談MySQL的鎖機制
- • Docker容器實戰(六) - 容器的隔離與限制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. js中 charCodeAt
- 2. Android中通過ViewHelper.setTranslationY實現View移動控制（NineOldAndroids開源項目）
- 3. 【Android】日常記錄：BottomNavigationView自定義樣式，修改點擊後圖片
- 4. maya 文件檢查 ui和數據分離 （一）
- 5. eclipse 修改項目的jdk版本
- 6. Android InputMethod設置
- 7. Simulink中Bus Selector出現很多? ? ?
- 8. 【Openfire筆記】啓動Mac版Openfire時提示「系統偏好設置錯誤」
- 9. AutoPLP在偏好標籤中的生產與應用
- 10. 數據庫關閉的四種方式
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. CSS3製做各類形狀圖像
- 2. CSS3繪製各類形狀
- 3. css繪製各類各樣的形狀圖形
- 4. CSS 繪製各類形狀
- 5. *各類形狀
- 6. css3激發想象/css3各類圖形
- 7. CSS各類形狀
- 8. css繪製各類形狀圖形（第二版）
- 9. css3實現小箭頭，各類圖形
- 10. Android使用shape繪製各類形狀