Css画圣诞树

今天看到一道有趣的css题,要求用html和css实现一个圣诞树(上面一个小三角,下面一个大三角,最下面是一个矩形)?

你看到后脑子中的印象是什么呢,三角形的做法,还是什么,接下来看看我的制作过程。


<!DOCTYPE html>

<html>

<head>

<title>TODO supply a title</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style type="text/css">

*{

margin: 0;

padding: 0;

}

#div1{

width: 500px;

height: 500px;

border: 5px #000 solid;

margin: 0 auto;

text-align: center;

}

h1{

color: #33ff33;

margin-top: 10px;

}

h2{

width: 0;

height:0;

border-top:60px #fff solid;

border-right:70px #fff solid;

border-bottom:70px #3333ff solid;

border-left:70px #fff solid;

position:relative;

left:180px;

}

h3{

width: 0;

height:0;

border-top:100px #fff solid;

border-right:100px #fff solid;

border-bottom:100px #3333ff solid;

border-left:100px #fff solid;

margin-left: 150px;

margin-top: -100px;

}

p{

width: 10px;

height:180px;

margin:0 auto;

background: red;

clear: both; /*不加清除浮动就会在h3下边显示*/

}

</style>

</head>

<body>

<div id="div1">

<h1>圣诞树制作</h1>

<h2></h2>

<h3></h3>

<p></p>

</div>

</body>

</html>

效果如下:

时间: 2024-11-10 08:10:44

Css画圣诞树的相关文章

Effective前端3:用CSS画一个三角形

三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是太麻烦.三角形其实可以用CSS画出来.如上图提到,可以分为两种三角形,一种是纯色的三角形,第二种是有边框色的三角形,先介绍最简单的纯色三角形. 1. 三角形的画法 三角形可以用border画出来,首先一个有四个border的div应该是这样的: 然后把它的高度和宽度去掉,剩下四个border,就变成了: 再把bord

前些日子用css画的大白

闲来无事用css画的一个大白...其实有一些地方偷懒了用svg去画的,因为用纯几何形状组合去画变化那么复杂的曲线不太现实.但svg曲线坐标还是自己一点点调出来的,没有用工具生成. :ps:点击身体的某些地方可以交互,你能发现几个地方?

用css画图标

css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标. 这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形. 1. 我们要将该 div 的 width 和 height 都设置为 0,三角形是通过 border 来实现: 2. 通过我们需要画成的三角形的目标分析,这个三角形的朝向(只针对规则的朝向:上.右.下.左.上左.

如何用css画出三角形

看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及颜色. 如果你将宽度调的足够大,改变不同方向的颜色,你就可以发现盒模型的border是四个梯形一样的线条. 这个时候如果将盒模型内部的height,width调为0px,则三角形就形成了. 1 border:100px solid transparent //边框100px,实线,透明颜色,下面三行

html+css画虚线,实线

html+css画虚线,实线 2014-07-18 09:21 4086人阅读 评论(0) 收藏 举报  分类: 其他(11)  html中加入虚线 Posted on 2011-11-23 15:57 Trible.H 阅读(11498) 评论(0) 编辑 收藏 html里添加虚线 <hr style="border:1px dashed #000; height:1px"> <hr style="border:1px dotted #036"

用CSS画英文字母

起因是在网上看到了有人用纯css画出了英文字母,感觉不难,了解过css3的话都会感觉思路比较直观 主要用到的css知识点:绝对定位,圆角属性以及元素的宽高均为零时边框的挤压性质 效果图 源代码 <!DOCTYPE html> <html> <head> <title>CSS-Letter</title> <meta charset="utf-8"/> <style type="text/css&qu

css 画 爱心

用css画爱心,虽然这样的方法会写很多的css代码,但是做成功之后,会有一种很满足的成就感. 爱心,可以有3个常规的几何图形形成,一个正方形加两个相同半径的圆或半圆.一个等腰三角形加两个圆,两个房型叠加,都行. 我的实现方法是选择最简单的一个正方形加两个相同半径的圆.首先创建一个类名为heart的div,然后为其固定宽度,高度,和背景颜色.接着通过伪类选择器:before和:after添加content:''; 规定其宽度和高度都为之前的div的高度,背景颜色与之前的div相同,通过一个大于高度

css画三角

#sanjiao{    width: ;    height: 0;    border-left: 5px solid transparent;    border-right: 5px solid transparent;    border-top: 10px solid black;} div+css画三角形代码原理采用的是均分原理. border-left设置为透明后 ,如果border-top有颜色,那么就会出来一个45度的锐角.

CSS画圆角

 <!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title></title>   <style>    div{     width:300px;     height:300px;     border:1px solid red;    }   </style>  </head>  <body>