用CSS画五角星
- <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>五角星</title>
<style>
#star-five {
margin: 50px;
position: relative;
display: block;
color: red;
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
/*-moz-transform: rotate(35deg);*/
/*-webkit-transform: rotate(35deg);*/
/*-ms-transform: rotate(35deg);*/
/*-o-transform: rotate(35deg);*/
transform: rotate(35deg);
}
#star-five:before {
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -45px;
left: -65px;
display: block;
/*下面这条代码是必须的,表示在#star-five盒子之前插入一个非空的盒子*/
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);- }
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0;
height: 0;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}- </style>
</head>
<body>
<div id="star-five"></div>
</body>
</html>
用CSS画五角星的更多相关文章
- 用css画图标
css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一 ...
- CSS学习笔记一:css 画平面图形
最近在学习CSS,先从CSS画点平面图形入手,发现除了正方形.长方形此类比较简单,只要有长宽设置恰当即可,画圆要涉及radius,然后恢复到做界面的最讨厌的状态了,不断的修改设值,调整数据,所幸并不多 ...
- 用CSS画基本图形
用CSS画基本图形 1.正方形 代码如下: #square { width: 100px; height: 100px; background: red; } 2.长方形 代码如下: #recta ...
- 一步一步教你用CSS画爱心
今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...
- 参考bootstrap中的popover.js的css画消息弹框
前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...
- Effective前端3:用CSS画一个三角形
p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...
- 用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
- 用纯css画个三角形
用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...
- 如何用css画出三角形
看到有面试题里会有问到如何用css画出三角形 众所周知好多图形都可以拆分成三角形,所以说会了画三角形就可以画出很多有意思的形状 画出三角形的原理是调整border(边框)的四个方向的宽度,线条样式以及 ...
随机推荐
- document.write 向文档中写内容,包括文本、脚本、元素之类的,但是它在什么时候执行不会覆盖当前页面内容尼?
当你打开一个页面,浏览器会 调用 document.open() 打开文档 document.write(...) 将下载到的网页内容写入文档 所有内容写完了,就调用 document.close() ...
- Enable-Migrations 在应用程序配置文件中找不到xx连接字符串
在解决方案中有多个项目时,使用Enable-Migrations 命令进行数据迁移时,出现以下错误: 尝试在Enable-Migrations 命令中指定-projectName也不行,最后将要操作的 ...
- Linux下oracle 11g安装
服务器环境要求 硬盘 20G以上 ,必须高于1G的物理内存,交换空间一般为内存的2倍,例如:1G的内存可以设置swap 分区为3G大小 在Root用户下执行以下步骤: 修改用户的SHELL ...
- 关于垂直切分Vertical Sharding的粒度
转载原文地址 http://blog.csdn.net/bluishglc/article/details/6274841 垂直切分的粒度指的是在做垂直切分时允许几级的关联表放在一个shard里.这个 ...
- hdu 2564 词组缩写
Problem Description 定义:一个词组中每个单词的首字母的大写组合称为该词组的缩写. 比如,C语言里常用的EOF就是end of file的缩写. Input 输入的第一行是一个整数T ...
- ubuntu12.04 安装 ruby1.9.3
sudo apt-add-repository ppa:brightbox/ruby-ng sudo apt-get update sudo apt-get install ruby rubygems ...
- smarty模板引擎中section循环loop与total的区别
在smarty模板引擎的section循环中 $data=[101,102,103,105,104]; section的两个属性total与loop {section foo $data start= ...
- Double Strings Solved Problem code: DOUBLE
# Fuking silly, OTZ.... import sys def main(): n = int(raw_input()) for num in sys.stdin: if int(num ...
- mysql 套事物实例
public static DataSet GetPPriceList(string aircompany, string departPort, string arrivePort, string ...
- MyEclipse8.5自动生成注册码
package com; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamRe ...