三角型的常见写法，及三角的旋转
<style>
div{
margin:50px;
}
.triangle{
width:0;
height:0;
border-width:30px;
border-style:solid;
border-color:red blue yellow green;
overflow:hidden;
}
.triangle1{
border-width:30px;
border-color:#000 transparent transparent transparent;
border-style:solid dashed dashed dashed;
width:0;
height:0;
overflow:hidden;
}
.triangle2{
border-width:20px;
border-color:#000 #000 transparent transparent;
border-style:solid solid dashed dashed;
width:0;
height:0;
overflow:hidden;
}
.triangle3{
background: none repeat scroll 0 0 #E7E7E7;
color: #666666;
font: 12px/28px normal;
height: 28px;
position: relative;
width: 66p
}
.triangle3:after{
background: none repeat scroll 0 0 blue;
color: red;
content: ".";
height: 12px;
position: absolute;
right: -3px;
top: 7px;
transform: rotate(45deg);
width: 12px;
}
.triangle4{
color:#000;
}
.outWrap{
border: 1px solid #000;
width: 60px;
height: 30px;
line-height: 30px;
border: 1px solid #000;
}
.wrap b{
border-width: 6px;
border-color: #999 #fff #fff;
border-style: solid;
height: 0;
line-height: 0;
display: inline-block;
vertical-align: text-bottom;
font-size: 0;
transition: transform 0.2s ease-in 0s;
width: 0;
}
.wrap:hover b{
border-color: red #fff #fff #fff;
transform:rotate(180deg);
transform-origin:50% 30%;
}
</style>
</head>
<body>
<!--利用border实现三角-->
<div class="triangle"></div>
<!--90度方向三角-->
<div class="triangle1"></div>
<!--45度方向三角-->
<div class="triangle2"></div>
<!--利用矩形转一个角度，此处内容点要与背景色一致-->
<div class="triangle3"></div>
<!--利用html中的特殊字符▲■◆等-->
<div class="triangle4">▲</div>
<!--三角的旋转-->
<div class="outWrap">
<a class="wrap">
222
<b></b>
</a>
</div>
相关推荐
汀溪中学2008-2009学年初二上年级期中考数学试卷主要涵盖了初中的基础数学知识，包括实数、代数表达式、几何图形、三角形性质、旋转和平移等概念。以下是对试卷中涉及知识点的详细解释： 1. 选择题： - 第1题考察...
- **常见图形的对称轴数量**：正方形有4条，等边三角形有3条，等腰三角形有1条，等腰梯形有1条，长方形有2条，圆有无数条，线段和角各有1条。 - **画轴对称图形**：确定关键点，测量到对称轴的距离，然后在对称轴...
如长方形、正方形、圆等都是轴对称图形，它们的对称轴数量分别是：长方形2条，正方形4条，正三角形3条，圆则有无数条对称轴。平行四边形不是轴对称图形，这是学生需要注意的特例。 - 画轴对称图形的另一半需要找...
1. 数字的读写与转换：题目中提到五十五万一千零九十的数字写法和转换，涉及到大数的读写及单位的换算，例如将五十五万一千零九十写作数字形式，并将其转换为以“万”为单位的数。 2. 分数的理解与运算：73的分数...
这份资料是针对小学六年级学生的数学毕业考试题及答案，主要涵盖了小学阶段常见的数学知识点，包括数字的书写、单位换算、比例与分数、几何图形、代数运算、概率统计以及实际问题解决等方面。以下是根据题目内容提炼...
1. 平面图形的性质：复习和加强学生对常见平面图形（如三角形、正方形、矩形、圆形等）的性质理解，包括它们的边、角、对称性等特点。 2. 图形的变换：学习平移、旋转和对称的基本知识，理解图形变换的原理，能在...
- 常见几何图形的识别，如正方形、长方形、三角形、圆形等，了解它们的性质。 - 平面图形的周长和面积计算，立体图形的表面积和体积计算。 4. 图形变换与位置关系： - 平移、旋转、对称等基本图形变换概念。 - ...
- **乘除法**：从表内乘法口诀开始，到两位数及以上的乘除法，包括乘法口诀、因数和倍数、有余数的除法等。 - **运算定律**：如交换律、结合律、分配律等，这些定律适用于整数、小数和分数运算，并推广到这些数的...
- 了解基本的图形概念，如点、线、面、体等，并认识常见的平面图形（如三角形、长方形、正方形等）和立体图形（如长方体、正方体、球体等）。 - 掌握基本图形的性质，比如对边平行、角的种类（直角、锐角、钝角）...
在前端开发领域，星级评分效果是一种常见的用户交互方式，用于让用户对产品或服务进行评分。通过使用CSS和JavaScript，开发者可以创建出美观且响应式的星级评分界面。本篇文章重点在于阐述如何仅使用CSS技术来绘制...