Not much nonsense, let's show you the renderings first:
The cake is divided into three parts, the bottom cake, the top cake and the candle part. The layout of HTML is also layout according to these three parts. The other is the use of CSS positioning and CSS3 Rotate. It's simpler, I believe that code farmers understand.
I won't repeat others.
The complete HTML code and CSS code are given below
<! Doctype html> <html> <head lang = EN> <meta charset = UTF-8> </tictle> <Style> .Container {width: 600px; 600px; margin: 0px a uto; Background: #FaFafa; Border-Radius: 5px; Position: Relative;} / ** ** Top layer ** / .bringhday .top-one {positive: width: 280px; heig ht: 280px; bottom: 200px; left : 160px;}. BITHDAY .top-One .bottom {posity: absolute; width: 280px; height: 280px; bottom: -30px; 1px solid #3E2001; s: 140px; transform: rotatex (60deg); Z-index: 4; background: #3E2001; Box-shadow: 0px 0px 20px #3E2001;} .bIRTHDAY .top- One .top {posted: width: 280px; height: 28. 0px; TOP: -50px; border- radius: 140px; background: #ffffff; Transform: Rotatex (60Deg); Box-shadow: 2px 2px 20px #b7b7b7; z-index: 6; Background: -Radial-Gradient (Circle, #783D01, #3E2001 10px, #914909 10px, White 20px); Background: -moz-Reperation-Radial-Gradient (Circle, #783d01, #3E2001 10px, #914909 10px, White 20px);}. y .top-one .side {position: absolute; top: 95px; width: 280px; height: 70px; border: 1px solid #3e2001; border-top-width: 0px; border-bottom-width: 0px; background: #F Ffff; Z-index: 5; background: #3e2001;} / ** ** The bottom layer of ** / .brenday .bottom-One {position: absolute; width: 400px; height: 400px; bottom: 0px; left:} .bIRTHDAY .b OTTOM-One .bottom {Position: AbSolute; width: 400px; height: 400px; bottom: -30px; border: 1px solid #914909; border-radius: 200px; rotatex (60deg); -Shadow: 2px 2px 20px #914909; z- Index: 1; Background: #3E2001; Overflow: Hidden;} .bringhdy .bottom-One .line {position: absolute; width: 400px; height: 400px; : 200px; z-index: 1;} .birthDay .bottom-one .line1 {bottom: 30px; border: 5px solid #783d01; left: -5px: 1;} .bIRTHDAY-One .top {posted: 4: 4 00px; Height: 400px ; TOP: -100px; Border: 1px solid #3E2001; Border-Radius: 200px; Background: #ffffff; Transform: Rotatex (60Deg); 01; Box-Shadow: Inset 0px 0px 20px #3e2001;} .birthDay .bottom-One .side {position: absolute; TOP: 100px; width: 400px; height: 130px; 1px solid #3E2001; Th: 0px; Border-Bottom-Width: 0px; Background: #3E2001; Z-index: 2;} / ** ** The bottom layer of text ** /. BIRTHDAY .flower {position: related: text-align: justify; px; FONT-SIZE: 32px; FONT-FAMILY: Helvetica Neue, Noto Sans CJK SC, Source Han Sans CN; COLOR: #FFFFFFF; ontent:; Display: Inline-Block ; Position: Relative; Width: 100%;} .birthday .flower I {Position: Relative; Width: 80px; LINE-Height: 80px; Display: Border-Ra dius: 50%; border: 2px solid #783d01 ; text-align: center; } /** ** 顶层的文字**/ .birthday .top-one .text{ width:100%; text-align: center; position: absolute; top:165px; z-index : 9; margin: 0px auto; font-size: 30px; color: #ffffff; transform: rotatex (60Deg) Skew (10Deg, 20DEG);} / ** ** candle ** / .bringhday {width: 10px ; Height: 80px; Margin: 0px Auto; Position: absolute; left: 295px; TOP: 130px; Z-index: 9;} .bIRTHDAY .Body {width: 10px; height: 70 px; Margin: 0px Auto; Background : Red; Border-Bottom-Width: 0px;} .birthDay .candle .top {width: 10px; height: 10px; border-radius: 5px; TRANSFORM: Rotatex (60Deg); Ative; Top: 5px; Background: Red;} .birthDay .candle .bottom {width: 10px; height: 10px; border-radius: 5px; transform: Rotatex (60Deg); group: red; box-shadow: 1px 1px 10px Red;} .birthDay .candle .Fire {posity: absolute; width: 6px; height: 6px; left: 2px; transform: rotate (45Deg); Background: #ffd507; -Shadow: 0px 0px 20px #FFFF00, 2px 2px 10px red;} </style> </head> <body> <div class = birthday> <div class = Container> <div class = candle> <div class = fire> </div> <div class = top> < /div> <div class = body> </div> <div class = bottom> </div> </div> <div class = top-one> <div class = top> </div> <div class = size > </div> <div class = bottom> </div> <div class = text> Happy Birthday </div> </div> <div class = bottom-one> <div class = top> </div> < div class = size> </div> <div class = bottom> <div class = line line1> </div> </div> <div class = flower> <i style = top: -20px; transform (50dey (50Dey G )> Sheng </i> <i style = top: 15px; transform: rotatey (30Deg)> Day </i> <i style = top: 15px; transform: rotatey (30Deg)> Quick </i> <I style =top:-20px;transform: rotateY(50deg)>乐</i> </div> </div> </div> </div></body></html>The above is the pure HTML5+CSS3 production birthday cake (the code is easy to understand) introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message. Xiaobian will reply to everyone in time. Thank you very much for your support for the VEVB Wulin website!