css如何繪制特殊圖形的方法示例
發(fā)布時間：2018-12-14 15:39:44 作者：哈利的魔法棒 
我要評論
我要評論這篇文章主要介紹了css如何繪制特殊圖形的方法示例的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、三角形
border邊框設(shè)置
代碼：
width: 300px; height: 300px; background: red; border: 40px solid black; border-left-color: blue; border-bottom-color: yellow; border-right-color: pink; border-top-color: #008800;
花特殊圖形的時候需要將寬高設(shè)置成0
效果：
代碼：
width: 0; height: 0; background: transparent; border: 40px solid black; border-left-color: blue; border-bottom-color: yellow; border-right-color: pink; border-top-color: #008800;
1、等腰三角形：將其他的邊的border設(shè)置成透明
代碼：
width:0; height: 0; background: transparent; border: 40px solid black; border-left-color: transparent; border-bottom-color: yellow; border-right-color: transparent; border-top-color: transparent;
2、直角三角形
代碼：先寫出個完整的div,再使用border-***-width：0；來截取三角形
border-top-width/border-bottom-width:0=》就是在中間橫著劈開一道，保留上邊或者下邊
border-left-width/border-right-width:0=》就是在中間豎著劈開一道，保留左邊或者右邊
.rightAngle{
width: 0;
height: 0;
background: transparent;
border: 40px solid black;
border-left-color: blue;
border-bottom-color: yellow;
border-right-color: pink;
border-top-color: #008800;
border-top-width: 0;
border-left-width: 0;
border-right-color: transparent;
}
3、梯形
彩帶圖形：
代碼：
width: 300px; height: 0; background: transparent; border: 40px solid #008800; border-left-color: transparent; border-bottom-color: yellow; border-right-color: transparent; border-top-color: #008800;
梯形：
代碼：將上面彩帶圖形的寬度減少，然后將上面的梯形設(shè)置為透明
width: 100px; height: 0; background: transparent; border: 40px solid #008800; border-left-color: transparent; border-bottom-color: #008800; border-right-color: transparent; border-top-color: transparent;
總結(jié)：通過設(shè)置長度和高度，以及設(shè)置border的透明度來拼湊成想要的圖形 4、圓形
4、圖形：
代碼： 使用border-radius:50%;
.circle{
width: 100px;
height: 100px;
border: 0;
border-radius: 50%;
background-color: orange;
}
5、橢圓
圖形：
代碼：
.ellipse{
width: 200px;
height: 120px;
background-color: orange;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
}
總結(jié)：
一個display：block的元素設(shè)定寬高之后表現(xiàn)為矩形。通過設(shè)定border-radius可以得到圓角矩形，圓形和橢圓形。
在使用border-radius時，有幾點(diǎn)可能需要注意一下：
- border-radius，可以分別對4個角進(jìn)行設(shè)定。 例如上圖：border-top-left-radius: apx bpx;
- border-xxx-xxx-radius的兩個值分別代表著橢圓長軸和短軸長度的一半，通常簡寫的時候例如border-top-left-radius: 10px;(border-top-left-radius:10px 10px;) 表明長軸和短軸的長度均為20px，也就是半徑為10px的圓形（圓角部分）。
- 當(dāng)使用百分比數(shù)值時，a 相對于width， b相對于height 6、特殊圖形
（1）斜邊三角形
圖形：
代碼：先畫個等邊三角形，然后再轉(zhuǎn)換角度
.beveledTriangle{
margin: 50px;
width: 0;
height: 0;
border: 20px solid #2b81af;
border-top-width: 40px;
border-top-color:transparent;
border-bottom-width: 40px;
border-bottom-color: transparent;
border-left-width: 0;
border-right-color: #008800;
border-right-width: 25px;
transform-origin:center center;
transform:rotateY(-180deg) rotate(-44deg) ;
}
（2）繪制一條“小尾巴”
圖形：
代碼：
.tail{
margin: 50px;
width: 100px;
height: 70px;
border-top-right-radius: 70px 70px;
border-right:6px solid #000000;
}
總結(jié)：當(dāng)對一個角應(yīng)用圓角樣式， 如果這個角相鄰的兩個boeder一個有定義而一個無定義 ，那么繪制的結(jié)果就是有粗到細(xì)的“小尾巴了”
7、繪制QQ圖案（取自AlloyTeam案例）
圖形：
代碼：
<a id="qq" href="http://www.alloyteam.com" target="_blank">
<div class='head'>
<div class='left eye'>
<div class="innerLeftEye">
</div>
</div>
<div class='right eye'>
<div class="innerRightEye">
<div class="fix"></div>
</div>
</div>
<div class='mouthTopContainer'>
<div class='mouthTop'></div>
</div>
<div class="mouthBottomContainer">
<div class="mouthBottom"></div>
</div>
<div class="lipsContainer">
<div class="lips">
<div class="lipShadow left">
</div>
<div class="lipShadow right">
</div>
</div>
</div>
</div>
<div class="body">
<div class="innerWrapper">
<div class="inner">
</div>
</div>
<div class="outterWrapper">
<div class = 'outter'>
</div>
</div>
<div class="scarf">
<div class="scarfShadow">
</div>
<div class="scarfShadowRight">
</div>
</div>
<div class="scarfEnd">
<div class="scarfEndShadow">
</div>
</div>
</div>
<div class="handWrapper">
<div class="leftHandTopContainer">
<div class="leftHandTop">
</div>
</div>
<div class="leftHandBottomContainer">
<div class="leftHandBottom">
</div>
</div>
<div class="rightHandTopContainer">
<div class="rightHandTop">
</div>
</div>
<div class="rightHandBottomContainer">
<div class="rightHandBottom">
</div>
</div>
</div>
<div class='footWrapper'>
<div class="leftFootTopWrapper">
<div class="leftFootTop">
</div>
</div>
<div class="leftFootBottomWrapper">
<div class="leftFootBottom">
</div>
</div>
<div class='toe left'></div>
<div class="rightFootTopWrapper">
<div class="rightFootTop">
</div>
</div>
<div class="rightFootBottomWrapper">
<div class="rightFootBottom">
</div>
</div>
<div class='toe right'></div>
</div>
</a>
<style>
body{
margin: 0;
padding:0;
font: 12px Tahoma, arial, sans-serif;
}
#mask {
position: absolute;
opacity: 0.2;
top:0;
left:0;
}
header{
font-family: 'Segoe UI Light','Segoe UI','Microsoft Jhenghei','寰?蔣闆呴粦',sans-serif;
color: #666;
font-size: 50px;
text-align: center;
margin-top:50px;
}
.team {
font-size: 0.6em;
}
.team a{
color:#5FB7E9;
text-decoration: none;
}
.team a:hover{
color:#4B9BC9;
}
/**
* LOGO
*/
#qq {
width: 420px;
height: 400px;
margin: 0 auto;
margin-top: 30px;
position: relative;
display:block;
}
.head{
position: absolute;
top:18px;
left: 96px;
width: 234px;
height: 185px;
border: 1px solid #000;
border-top-left-radius: 117px 117px;
border-top-right-radius: 117px 117px;
border-bottom-left-radius: 117px 68px;
border-bottom-right-radius: 117px 68px;
z-index:10;
background: #000;
}
.eye{
width: 44px;
height: 66px;
border:1px solid #000;
border-radius: 50% 50%;
position: absolute;
background: #fff;
}
.left.eye{
left:62px;
top:50px;
}
.right.eye{
left:123px;
top:50px;
}
.innerLeftEye{
position: absolute;
top: 20px;
left: 20px;
width: 18px;
height: 24px;
border-radius: 50%;
border: 1px solid #000;
background: #000;
}
.innerLeftEye:after{
content: "";
position: absolute;
width: 6px;
height: 8px;
background: white;
z-index: 11;
top: 6px;
left: 9px;
border-radius: 50%;
}
.innerRightEye{
position: absolute;
width: 18px;
height: 20px;
top: 20px;
left: 8px;
border-top-left-radius: 50% 90%;
border-top-right-radius: 50% 90%;
border-bottom-left-radius: 50% 10%;
border-bottom-right-radius: 50% 10%;
background: black;
box-shadow: 0 -1px 2px black;
}
.innerRightEye:after{
content: "";
position: absolute;
width: 10px;
height: 13px;
bottom: -1px;
left: 4px;
border-top-left-radius: 50% 100%;
border-top-right-radius: 35% 80%;
background: white;
}
.fix {
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: black;
top: 17px;
}
.fix:after{
content: "";
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: black;
top: 0;
left: 14px;
}
.mouthTopContainer {
position: absolute;
width: 158px;
height: 29px;
z-index: 1;
top: 120px;
left: 39px;
overflow: hidden;
}
.mouthTop{
width: 158px;
height: 34px;
position: absolute;
z-index: 1;
border:1px solid #FFA600;
background: #FFA600;
top: 0;
left: 0;
border-top-left-radius: 45% 34px;
border-top-right-radius: 45% 34px;
/*background-color: #FFA600; */
}
.mouthBottomContainer {
position: absolute;
width: 158px;
height: 15px;
z-index: 1;
top: 146px;
left: 39px;
overflow: hidden;
}
.mouthBottom{
width: 158px;
height: 24px;
position: absolute;
z-index: 1;
border:1px solid #FFA600;
background: #FFA600;
border-top:none;
top: -4px;
left: 0;
border-bottom-left-radius: 45% 24px;
border-bottom-right-radius: 45% 24px;
background-color: #FFA600;
}
.lips{
border: 1px solid #FFA600;
background: #FFA600;
width: 116px;
height: 24px;
position: absolute;
top: 146px;
left: 60px;
border-top: none;
border-bottom-left-radius: 50% 100%;
border-bottom-right-radius: 50% 100%;
}
.lipShadow {
width: 0px;
height: 0px;
position: absolute;
z-index: 2;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 8px solid black;
-webkit-transform-origin: top right;
-webkit-transform: rotate(-60deg);
-moz-transform-origin: top right;
-moz-transform: rotate(-60deg);
-o-transform-origin: top right;
-o-transform: rotate(-60deg);
transform-origin: top right;
transform: rotate(-60deg);
left: -12px;
top: 4px;
}
.lipShadow.right{
left:114px;
-webkit-transform: rotate(60deg) rotateY(180deg);
-moz-transform: rotate(60deg) rotateY(180deg);
-o-transform: rotate(60deg) rotateY(180deg);
transform: rotate(60deg) rotateY(180deg);
}
.body{
width: 326px;
height: 300px;
/*border: 1px solid black;*/
top: 135px;
left: 48px;
position: absolute;
}
.scarf {
border: 4px solid #000;
position: absolute;
background: #FB0009;
z-index: 5;
width: 258px;
height: 110px;
top: -2px;
left: 34px;
border-top-left-radius: 30px 34px;
border-top-right-radius: 38px 34px;
border-bottom-left-radius: 50% 76px;
border-bottom-right-radius: 50% 76px;
border-top: none;
}
.scarfShadow {
position: absolute;
border-top: 6px solid #000;
width: 60px;
height: 70px;
top: 0px;
left: 6px;
border-top-left-radius: 90px 120px;
border-top-right-radius: 30px 30px;
-webkit-transform: rotate(-79deg);
-moz-transform: rotate(-79deg);
-o-transform: rotate(-79deg);
transform: rotate(-79deg);
}
.scarfShadowRight {
position: absolute;
border-right: 6px solid black;
width: 100px;
height: 70px;
top: 8px;
left: 143px;
border-bottom-right-radius: 70px 70px;
z-index: 6;
}
.scarfEnd{
position: absolute;
width: 52px;
height: 64px;
z-index: 4;
top: 90px;
border: 3px solid black;
left: 74px;
border-bottom-left-radius: 50% 43%;
border-bottom-right-radius: 15px;
border-top-left-radius: 20% 57%;
background: #FB0009;
}
.scarfEndShadow{
position: absolute;
border-top: 6px solid black;
width: 20px;
height: 20px;
top: 6px;
left: 12px;
border-top-left-radius: 30px 30px;
-webkit-transform-origin: top right;
-moz-transform-origin: top right;
-o-transform-origin: top right;
transform-origin: top right;
z-index: 10;
-webkit-transform: skewX(4deg) scaleY(1.5) rotate(-60deg);
-moz-transform: skewX(4deg) scaleY(1.5) rotate(-60deg);
-o-transform: skewX(4deg) scaleY(1.5) rotate(-60deg);
transform: skewX(4deg) scaleY(1.5) rotate(-60deg);
}
.innerWrapper{
position: absolute;
overflow: hidden;
width: 280px;
height: 200px;
left: 30px;
top: 76px;
}
.inner {
border: 1px solid #000;
width: 218px;
position: absolute;
height: 210px;
border-radius: 50%;
left: 25px;
top: -71px;
z-index: 4;
background: #fff;
}
.outterWrapper{
width: 262px;
left: 32px;
height: 250px;
position: absolute;
top: 54px;
overflow: hidden;
}
.outter{
border: 1px solid #000;
width: 260px;
height: 250px;
border-radius: 125px;
position: absolute;
top: -84px;
z-index: 3;
background: #000;
}
.handWrapper{
position: absolute;
top: 219px;
left: 7px;
}
.leftHandTopContainer{
width: 118px;
height: 26px;
position: absolute;
z-index: 1;
top: 55px;
left: 50px;
-webkit-transform-origin: bottom left;
-webkit-transform: rotate(-70deg);
-moz-transform-origin: bottom left;
-moz-transform: rotate(-70deg);
-o-transform-origin: bottom left;
-o-transform: rotate(-70deg);
transform-origin: bottom left;
transform: rotate(-70deg);
overflow: hidden;
}
.leftHandTop{
width: 128px;
height: 54px;
border: 1px solid #050346;
position: absolute;
border-top-left-radius: 44% 38px;
border-top-right-radius: 56% 33px;
background: #000;
}
.leftHandBottomContainer {
width: 100px;
height: 30px;
position: absolute;
z-index: 1;
top: 78px;
left: 50px;
-webkit-transform-origin: top left;
-webkit-transform: rotate(-70deg);
-moz-transform-origin: top left;
-moz-transform: rotate(-70deg);
-o-transform-origin: top left;
-o-transform: rotate(-70deg);
transform-origin: top left;
transform: rotate(-70deg);
overflow: hidden;
}
.leftHandBottom{
width: 128px;
height: 44px;
border: 1px solid #050346;
background: #000;
border-top: none;
position: absolute;
border-bottom-left-radius: 48% 20px;
border-bottom-right-radius: 52% 23px;
top: -26px;
}
.rightHandTopContainer{
width: 118px;
height: 34px;
position: absolute;
z-index: 3;
top: 47px;
left: 240px;
-webkit-transform-origin: bottom right;
-webkit-transform: rotate(65deg);
-moz-transform-origin: bottom right;
-moz-transform: rotate(65deg);
-o-transform-origin: bottom right;
-o-transform: rotate(65deg);
transform-origin: bottom right;
transform: rotate(65deg);
overflow: hidden;
}
.rightHandTop{
width: 148px;
height: 54px;
border: 1px solid #050346;
position: absolute;
border-top-right-radius: 41% 54px;
border-top-left-radius: 59% 48px;
background: black;
left: -30px;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.rightHandBottomContainer{
width: 110px;
height: 58px;
position: absolute;
z-index: 1;
top: 81px;
left: 248px;
-webkit-transform-origin: top right;
-webkit-transform: rotate(90deg);
-moz-transform-origin: top right;
-moz-transform: rotate(90deg);
-o-transform-origin: top right;
-o-transform: rotate(90deg);
transform-origin: top right;
transform: rotate(90deg);
overflow: hidden;
}
.rightHandBottom{
width: 68px;
height: 28px;
border: 1px solid #000;
background: black;
border-top: none;
position: absolute;
top: 1px;
left: 38px;
border-bottom-right-radius: 100% 40px;
z-index: 999;
}
.footWrapper{
position: absolute;
top: 292px;
left: 80px;
}
.leftFootTopWrapper {
position: absolute;
width: 130px;
top: 16px;
left: -1px;
height: 37px;
overflow: hidden;
z-index: 2;
}
.leftFootTop{
position: absolute;
width: 120px;
height: 60px;
border: 4px solid black;
background: #FF9C00;
border-top-left-radius: 80% 70%;
top: -10px;
left: 3px;
}
.toe {
position: absolute;
border-top: 4px solid black;
width: 25px;
height: 20px;
top: 50px;
left: 2px;
border-top-right-radius: 30px 30px;
border-top-left-radius: 10px 10px;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-o-transform-origin: top left;
transform-origin: top left;
z-index: 10;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.toe.right{
-webkit-transform: rotate(45deg) rotateY(180deg);
-moz-transform: rotate(45deg) rotateY(180deg);
-o-transform: rotate(45deg) rotateY(180deg);
transform: rotate(45deg) rotateY(180deg);
left: 264px;
}
.leftFootBottomWrapper {
position: absolute;
width: 130px;
top: 52px;
left: -1px;
height: 38px;
overflow: hidden;
z-index: 2;
}
.leftFootBottom{
position: absolute;
width: 120px;
height: 60px;
border: 4px solid #000;
background: #FF9C00;
border-top-left-radius: 50% 44%;
border-top-right-radius: 50% 44%;
border-bottom-left-radius: 50% 56%;
border-bottom-right-radius: 50% 56%;
top: -30px;
left: 3px;
}
.rightFootTopWrapper {
position: absolute;
width: 134px;
top: 22px;
left: 134px;
height: 36px;
overflow: hidden;
z-index: 2;
}
.rightFootTop{
position: absolute;
width: 120px;
height: 60px;
border: 4px solid black;
background: #FF9C00;
border-top-right-radius: 32% 65%;
top: 0px;
left: 4px;
}
.rightFootBottomWrapper {
position: absolute;
width: 134px;
top: 52px;
left: 134px;
height: 38px;
overflow: hidden;
}
.rightFootBottom{
position: absolute;
width: 120px;
height: 60px;
border: 4px solid #000;
background: #FF9C00;
border-top-left-radius: 50% 56%;
border-top-right-radius: 50% 56%;
border-bottom-left-radius: 50% 44%;
border-bottom-right-radius: 50% 44%;
top: -30px;
left: 3px;
}
.rightToe {
position: absolute;
width: 40px;
height: 10px;
border: 2px solid #000;
background: #FF9C00;
border-radius: 50%;
-webkit-transform-origin: bottom right;
-webkit-transform: rotate(34deg);
-moz-transform-origin: bottom right;
-moz-transform: rotate(34deg);
-o-transform-origin: bottom right;
-o-transform: rotate(34deg);
transform-origin: bottom right;
transform: rotate(34deg);
top: 35px;
left: 210px;
z-index: 1;
}
.copyright{
margin: 50px 0 0 0;
height: 50px;
color: #999;
font-family: Tahoma;
font-size: 12px;
text-align: center;
}
.copyright a {
color: #999;
text-decoration: none;
}
.copyright a:hover, .copyright a:focus {
outline: none;
text-decoration: underline;
}
</style>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用CSS的clip-path屬性實(shí)現(xiàn)不規(guī)則圖形的顯示
這篇文章主要介紹了使用CSS的clip-path屬性實(shí)現(xiàn)不規(guī)則圖形的顯示，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2020-06-24使用css實(shí)現(xiàn)特殊標(biāo)志或圖形
這篇文章主要介紹了使用css實(shí)現(xiàn)特殊標(biāo)志或圖形，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2020-03-31
這篇文章主要介紹了常用css樣式(布局)及CSS常用樣式匯編的相關(guān)知識，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-10-28
這篇文章主要介紹了CSS3中常用的樣式【基本文本和字體樣式】,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-20
這篇文章主要介紹了編程式處理Css樣式的示例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-20- 這篇文章主要介紹了使用CSS偽元素控制連續(xù)幾個元素的樣式方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編2020-10-15
純CSS3 gradient屬性制作36種漂亮的html網(wǎng)頁漸變按鈕樣式
36種漂亮的CSS3 gradient屬性制作的html網(wǎng)頁漸變按鈕樣式，非常不錯，喜歡的朋友朋友快來下載源碼吧2020-10-14
這篇文章主要介紹了css樣式常見圖形效果展示的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-24
