How to draw special graphics in CSS
|
1. Triangle
Border settings
Code: 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; When drawing special graphics, you need to set the width and height to 0 Effect:
Code: 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. Isosceles triangle: Set the borders of other sides to transparent
Code: 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. Right triangle
Code: First write a complete div, then use border-***-width: 0; to intercept the triangle border-top-width/border-bottom-width:0=》is to split it horizontally in the middle and keep the top or bottom border-left-width/border-right-width:0=》is to split it vertically in the middle, keeping the left or right side
.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. Trapezoid Ribbon Graphics:
Code: 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; Trapezoid:
Code: Reduce the width of the ribbon graphic above, and then set the trapezoid above to transparent 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; Summary: By setting the length and height, as well as the transparency of the border, you can piece together the desired graphics 4. Circle 4. Graphics:
Code: Use border-radius:50%;
.circle{
width: 100px;
height: 100px;
border: 0;
border-radius: 50%;
background-color: orange;
}5. Ellipse Graphics:
Code:
.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%;
}Summarize:
A display:block element appears as a rectangle after setting its width and height. By setting border-radius you can get rounded rectangles, circles and ellipses. When using border-radius, there are a few points you may need to pay attention to:
(1) Hypotenuse triangle Graphics:
Code: Draw an equilateral triangle first, then convert the angle
.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) Draw a "small tail" Graphics:
Code:
.tail{
margin: 50px;
width: 100px;
height: 70px;
border-top-right-radius: 70px 70px;
border-right:6px solid #000000;
}Summary: When applying a rounded corner style to a corner, if the two adjacent boeders of this corner are one defined and one undefined , the result of drawing is a "small tail" with a transition from thick to thin. 7. Draw the QQ pattern (taken from the AlloyTeam case) Graphics:
Code:
<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>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: MySQL 8.0.23 free installation version configuration detailed tutorial
>>: Abbreviation of HTML DOCTYPE
Recommend
How to configure /var/log/messages in Ubuntu system log
1. Problem Description Today I need to check the ...
Analyze how a SQL query statement is executed in MySQL
Table of contents 1. Overview of MySQL Logical Ar...
Solution to the problem that docker CMD/ENTRYPOINT executes the sh script: not found/run.sh:
There is no problem with the Dockerfile configura...
Detailed explanation of querying JSON format fields in MySQL
During the work development process, a requiremen...
CSS3 transition to achieve underline example code
This article introduces the sample code of CSS3 t...
Does Mysql ALTER TABLE lock the table when adding fields?
Table of contents Before MySQL 5.6 After MySQL 5....
Linux sftp command usage
Concept of SFTP sftp is the abbreviation of Secur...
Implementation of converting between underline and camel case in js (multiple methods)
Table of contents Application scenarios: Method 1...
Example of assigning values to ActiveX control properties by param name in a web page
Copy code The code is as follows: <HTML> &l...
Navicat Premium operates MySQL database (executes sql statements)
1. Introduction to Navicat 1. What is Navicat? Na...
Vue3 Vue CLI multi-environment configuration
Table of contents 1. Introduction 2. Switching 1....
VMware vSphere 6.7 (ESXI 6.7) graphic installation steps
Environment: VMware VCSA 6.7 (VMware-VCSA-all-6.7...
Let’s talk in detail about how browsers view closures
Table of contents Preface Introduction to Closure...
Web Design: Web Music Implementation Techniques
<br />When inserting music into a web page, ...
Linux uses iptables to limit multiple IPs from accessing your server
Preface In the Linux kernel, netfilter is a subsy...