用 CSS 实现三角形与平行四边形
来源:互联网 发布:移动端js拼图游戏 编辑:程序博客网 时间:2024/05/29 08:06
第一种方法:利用border
一个矩形拼接两个三角形最终制造出一个平行四边形。为什么使用border可以产生三角形呢?先来看看一张图片:
看了图中的三个小图形的变化过程,你应该已经清楚了一半。其实 hack 出三角形只需要两个条件,第一,元素本身的长宽为0;其次,将不需要的部分通过 border-color 来设置隐藏。通过类似的方法,你还可以创造出梯形,上图中的三个图形的代码如下。(另附 CodePen 示例,http://codepen.io/jerryzou/pen/mJYJym )
#first {
width: 20px;
height: 20px;
border-width: 10px;
border-style: solid;
border-color: red green blue brown;
}
#second {
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: red green blue brown;
}
#third {
width: 0;
height: 0;
border-width: 10px;
border-style: solid;
border-color: red transparent transparent transparent;
}
接下来就要考虑如何拼接出一个平行四边形了。在border法中,它由三部分组成,分别是左三角形、矩形、右三角形。如果每次绘制平行四边形都要创建三个元素显然过于麻烦了,所以在这里:before和:after伪元素是个不错的选择。下面我们实现一下这样的效果:
为了将三角形与矩形无缝拼接到一起,多处属性要保持一致,所以使用类似 Less, Sass, Stylus 等 CSS 预处理器来写这段代码会更容易维护,下面给出 Scss 版本的代码。(另附 CodePen 链接,http://codepen.io/jerryzou/pen/ZGNGWZ?editors=110)
//三角形的宽高
$height: 24px;
$width: 12px;
//对平行四边形三部分的颜色进行赋值
@mixin parallelogram-color($color) {
background: $color;
&:before { border-color: transparent $color $color transparent; }
&:after { border-color: $color transparent transparent $color; }
}
//单个三角形的样式
@mixin triangle() {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: $height/2 $width/2;
top: 0;
}
//平行四边形的样式
.para {
display: inline-block;
position: relative;
padding: 0 10px;
height: $height;
line-height: $height;
margin-left: $width;
color: #fff;
&:after {
@include triangle();
right: -$width;
}
&:before {
@include triangle();
left: -$width;
}
@include parallelogram-color(red);
}
需要注意的是,如果通过 $height、$width 设置的三角形斜率太小或太大都有可能造成渲染出锯齿,所以使用起来要多多测试一下不同的宽高所得到的视觉效果如何。
第二种方法:利用transform
使用transform来实现平行四边形的方法是我在逛去啊的时候看到的,效果大概是这个样子:
看到之后觉得好神奇啊,原来还可以只有平行四边形的外轮廓。(因为方法一只能创造填充效果的平行四边形)实现起来非常简单,主要是借助了transform: skew(...),下面就来看看源码吧。
<style>
.city {
display: inline-block;
padding: 5px 20px;
border: 1px solid #44a5fc;
color: #333;
transform: skew(-20deg);
}
</style>
<div class="city">上海</div>
于是我们得到了这样的效果:
看到图片的你一定是这样想的:
别着急嘛,我们的确是把整个 div 进行了歪曲,导致中间的文字也是倾斜的,而这显然不是我们所要的效果。所以我们需要加一个内层元素,并对内层元素做一次逆向的歪曲,从而得到我们想要的效果:
实现代码如下,另附 CodePen 示例(http://codepen.io/jerryzou/pen/BNeNwV?editors=110)
<style>
.city {
display: inline-block;
padding: 5px 20px;
border: 1px solid #44a5fc;
color: #333;
transform: skew(-20deg);
}
.city div {
transform: skew(20deg);
}
</style>
<div class="city">
<div>上海</div>
</div>
总结
第一种方法使用 border 属性 hack 出三角形,并通过对三个元素进行拼接最终实现了平行四边形;而第二种方法则通过 transform: skew 来得到平行四边形。总体来说,第二种方法相对于第一种代码量小得多,而且也很好理解。唯一的不足是无法构造像本站的分页中所使用的梯形。
- 用 CSS 实现三角形与平行四边形
- 用 CSS 实现三角形与平行四边形
- 用css实现三角形和平行四边形
- CSS实现三角形和平行四边形
- css 制作三角形/平行四边形
- CSS实现不同的图形(三角形、正方形、圆形、平行四边形)
- 使用CSS写出三角形、圆形、平行四边形、梯形
- 用css实现三角形
- 用CSS实现三角形
- 用css实现三角形效果
- 用纯CSS实现三角形
- 用css实现三角形效果
- 打印平行四边形,三角形,最大值
- 如何用 html+css 实现平行四边形,以及气泡框呢?
- css实现三角形
- CSS border实现三角形
- CSS border实现三角形
- css实现画三角形
- 单进程服务器-非堵塞模式(python版)
- Mongodb入门教程
- 对recycleView的分页借鉴库
- HTTP状态码
- 操作系统历史以及Linux发行版简介
- 用 CSS 实现三角形与平行四边形
- Spring-Boot java事务回滚异常“JTA transaction unexpectedly rolled back (maybe due to a timeout); nested”
- viewpager+Fragment
- CSS 文本样式[上]
- 【推荐】SAP关闭正在执行的缓慢的程序
- ES6之善用数组的fill()
- 从银行转账失败到分布式事务:总结与思考
- HIVE存储格式
- 阿里创作平台内容号怎么发布信息