快捷导航
蚂蚁部落 网站首页 前端教程 特效教程 查看内容

栏目导航

≡canvas特效≡

≡CSS特效≡

≡JavaScript特效≡

≡jQuery特效≡

CSS3 矩形切角效果代码实例

2017-5-27 13:35| 发布者: admin| 查看: 9970| 评论: 1|来自: 蚂蚁部落

分享一段代码实例,它利用css3实现了矩形切角效果。

在矩形的右下角有一个类似于切去的一角效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
div{
  padding: 1em 1.2em;
  max-width: 12em;
  color: white;
  background: #58a;
  background: linear-gradient(-45deg, transparent 15px, #58a 0);
}
</style>
</head>
<body>
<div>蚂蚁部落</div>
</body>
</html>

代码非常的简单,只要对线性渐变有良好的理解即可。

相关阅读:

(1).linear-gradient参阅CSS3 linear-gradient()线性渐变一章节。

(2).线性渐变角度参阅CSS3 倾斜角度线性渐变一章节。


鲜花

握手

雷人

路过

鸡蛋
发表评论

最新评论

引用 yuantingjun 2017-9-7 15:37
用 linear-gradient 实现好简洁,当结束值小于开始值时可以为背景创建两个鲜明的颜色。棒!

查看全部评论(1)

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-23 15:55 , Processed in 0.095500 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部