如何用CSS来制作这个LOGO

html-css06

如何用CSS来制作这个LOGO,第1张

两个半圆,两个矩形,两个斜边

关键样式

position:absolute

border-radius,

transform: rotate

我们简单的将HTML写成这样:

<div id="container"

<img id="logo" src="logo.png" alt="Lee Munroe" /</divCSS样式可能会是这个样子的:

body{background:#999}

#container{

width:960px

background:#fff

margin:20px auto

padding:10px}下面是一个效果预览:

设置为相对定位,当我们定位logo的时候,我们希望它的位置是相对于容器的,因此使用相对定位:

#container{

width:960px

background:#fff

margin:20px auto

padding:10px

position:relative}将它定位到盒子的外面现在你需要做的就仅仅是定位logo,将其水平定位,让它从容器中突出出来。#logo{position:absolute