绘制HTML5的Logo

一、HTML代码

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML5 logotitle>
    
    <link rel="stylesheet" href="logo.css" type="text/css">
head>
<body>
    <div class="bg">
        
        <div class="beam" style="transform: rotate(5deg)">div>
        <div class="beam" style="transform: rotate(15deg)">div>
        <div class="beam" style="transform: rotate(25deg)">div>
        <div class="beam" style="transform: rotate(35deg)">div>
        <div class="beam" style="transform: rotate(45deg)">div>
        <div class="beam" style="transform: rotate(55deg)">div>
        <div class="beam" style="transform: rotate(65deg)">div>
        <div class="beam" style="transform: rotate(75deg)">div>
        <div class="beam" style="transform: rotate(85deg)">div>
        <div class="beam" style="transform: rotate(95deg)">div>
        <div class="beam" style="transform: rotate(105deg)">div>
        <div class="beam" style="transform: rotate(115deg)">div>
        <div class="beam" style="transform: rotate(125deg)">div>
        <div class="beam" style="transform: rotate(135deg)">div>
        <div class="beam" style="transform: rotate(145deg)">div>
        <div class="beam" style="transform: rotate(155deg)">div>
        <div class="beam" style="transform: rotate(165deg)">div>
        <div class="beam" style="transform: rotate(175deg)">div>
        
        
        <div style="top: 120px;left: 229px;position: absolute">
            
            <div class="d_shield1">div>
            <div class="d_shield2">div>
            <div class="d_shield3">div>
            
            <div class="d_shield4">div>
            <div class="d_shield5">div>
            <div class="d_shield6">div>
            
            
            <div style="transform: scale(0.82);left: 31px;top: 25px;position: absolute">
                <div class="r_shield1">div>
                <div class="r_shield2">div>
                <div class="r_shield3">div>
            div>
            
            <div class="gray1">div>
            <div class="gray2">div>
            <div class="gray3">div>
            <div class="gray4">div>
            
            <div class="white1">div>
            <div class="white2">div>
            <div class="white3">div>
            <div class="white4">div>
            
            <div class="d_shield7">div>
            <div class="r_shield4">div>
        div>
        
        
        
        <img src="HTML.png">
    div>
body>
html>

二、CSS代码

body{
    margin: 0px;/*外边距*/
    padding: 0px;/*内边距*/
}
.bg{
    position: relative;/*相对定位*/
}
.bg{
    width: 800px;
    height: 600px;
    background-color: #f2f2f2;
    overflow: hidden;
}
.beam{
    width: 1600px;
    height: 20px;
    top: 290px;/*绝对定位，距父元素上边线290px*/
    left: -400px;/*绝对定位，距父元素左边线290px*/
    background-color: white;
    position: absolute;/*绝对定位*/
}
.d_shield1,.d_shield2,.d_shield3,.d_shield4,.d_shield5,.d_shield6,.d_shield7{
    background: #e15016;
    position: absolute;
}
.d_shield1{
    left: 32px;
    width: 140px;
    height: 346px;
}
.d_shield2{
    transform: skewX(5deg); /*水平斜切5度*/
    left: 16px;
    width: 100px;
    height: 346px;
}
.d_shield3{
    transform: skewY(15deg);/*垂直斜切15度*/
    top: 265px;
    left: 32px;
    width: 140px;
    height: 100px;
}
.d_shield4{
    left: 172px;
    width: 140px;
    height: 346px;
}
.d_shield5{
    transform: skewX(-5deg);
    left: 227px;/*没算出来227，浏览器调试出来的数字*/
    width: 100px;
    height: 346px;
}
.d_shield6{
    transform: skewY(-15deg);
    top: 265px;
    left: 172px;
    width: 140px;
    height: 100px;
}
.r_shield1,.r_shield2,.r_shield3,.r_shield4{
    background-color: #ee6812;
    position: absolute;
}
.r_shield1{
    left: 172px;
    width: 140px;
    height: 346px;
}
.r_shield2{
    transform: skewX(-5deg);
    left: 227px;
    width: 100px;
    height: 363px;
}
.r_shield3{
    transform: skewY(-15deg);
    top: 282px;
    left: 172px;
    width: 140px;
    height: 100px;
}
.gray1,.gray2,.gray3,.gray4{
    background-color: #ebebeb;
    position: absolute;
}
.gray1{
    height: 43px;
    width: 102px;
    left: 70px;
    top: 70px;
}
.gray2{
    transform: skewX(5deg);
    width: 46px;
    height: 216px;
    top: 70px;
    left: 75px;
}
.gray3{
    width: 95px;
    height: 43px;
    left: 77px;
    top: 156px;
}
.gray4{
    transform: skewY(15deg);
    width: 87px;
    height: 47px;
    left: 85px;
    top: 251px;
}
.white1,.white2,.white3,.white4{
    background-color: #fff;
    position: absolute;
}
.white1{
    width: 102px;
    height: 43px;
    top: 70px;
    left: 172px;
}
.white2{
    transform: skewX(-5deg);
    width: 46px;
    height: 216px;
    top: 70px;
    left: 223px;
}
.white3{
    height: 43px;
    width: 95px;
    left: 172px;
    top: 156px;
}
.white4{
    transform: skewY(-15deg);
    height: 47px;
    width: 87px;
    left: 172px;
    top: 251px;
}
.d_shield7{
    height: 20px;
    top: 199px;
    width: 80px;
    left: 60px;
}
.r_shield4{
    height: 43px;
    top: 113px;
    left: 172px;
    width: 103px;
}
img{
    position: absolute;
    left: 234px;
    top: 14px;
}
web前端

相关

web前端面试题

web前端和后端的区别在哪？

【Web前端】【开源分享】H5登陆界面 - 2021年12月30日

Web前端学习第六天——————HTML、CSS篇.021鼠标划入效果hover

Web前端学习第五天——————HTML篇.018盒模型

WEB前端基础之SCC(字体颜色背景-盒子模型)

创优视觉科技广州分公司谈为何学习Web前端？

web前端的学习02

web前端的学习03

Web前端开发

web前端中css的基本用法，详解以及示例

Web前端面试敲重点知识，14个TypeScript核心基础面试题和答案

标签