CSS实现折角效果：

实现效果:

代码如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="note"><p>111</p></div><div class="note red rounded"><p>222</p></div><div class="note blue"><p>333</p></div><div class="note taupe"><p>444</p></div>
</body>
<style>html,body {padding: 0;margin: 0;font: 1em/1.4 Cambria, Georgia, sans-serif;color: #333;background: #fff;}a:link,a:visited {border-bottom: 1px solid #c55500;color: #c55500;text-decoration: none;}a:visited {border-bottom: 1px solid #730800;color: #730800;}a:hover,a:focus,a:active {border: 0;color: #fff;background: #c55500;}a:visited:hover,a:visited:focus,a:visited:active {color: #fff;background: #730800;}.container {width: 540px;padding: 0 0 10px;margin: 0 auto 30px;}h1 {margin: 1em 0 0;font-size: 2.5em;font-weight: normal;line-height: 1.2;text-align: center;}h2 {margin: 0.5em 0 1.5em;font-size: 1.25em;font-weight: normal;font-style: italic;text-align: center;}p {margin: 1em 0;line-height: 1.4em;}pre {margin: 1.4em 0;font-size: 12px;line-height: 1.4em;white-space: pre-wrap;word-wrap: break-word;}.follow {clear: both;margin-top: 2em;font-size: 1.125em;}.follow span {font-weight: bold;}.note {position: relative;width: 480px;padding: 1em 1.5em;margin: 2em auto;color: #fff;background: #97C02F;overflow: hidden;}.note:before {content: "";position: absolute;top: 0;right: 0;border-width: 0 16px 16px 0;border-style: solid;border-color: #fff #fff #658E15 #658E15;background: #658E15;display: block;width: 0;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), -1px 1px 1px rgba(0, 0, 0, 0.2);}.note.red {background: #C93213;}.note.red:before {border-color: #fff #fff #97010A #97010A;background: #97010A;}.note.blue {background: #53A3B4;}.note.blue:before {border-color: #fff #fff transparent transparent;background: transparent;}.note.taupe {background: #999868;}.note.taupe:before {border-color: #fff #fff #BDBB8B #BDBB8B;background: #BDBB8B;}.note.rounded {-webkit-border-radius: 5px 0 5px 5px;-moz-border-radius: 5px 0 5px 5px;border-radius: 5px 0 5px 5px;}.note.rounded:before {border-width: 8px;border-color: #fff #fff transparent transparent;-webkit-border-bottom-left-radius: 5px;-moz-border-radius: 0 0 0 5px;border-radius: 0 0 0 5px;}.note p {margin: 10px;}.note p+p {margin: 1.5em 0 0;}
</style></html>

CSS实现折角效果：相关推荐

纯CSS实现圆角阴影的折角效果
纯CSS实现圆角阴影的折角效果 2016-10-04 13:14 网页设计标签:css 1637 2 把元素的一角处理类似折角的形状,再配上或多或少的修饰,这种效果已经成为一种非 ...
html中切角文本框,css实现切角效果
1. 一个切角思路:如果我们要得到有一个切角的元素,我们只需要使用一个径向渐变就可以达到这个目标,这个渐变需要把一个透明色标放在切角处,然后再相同的位置设置另一个色标,并且把它的颜色设置成我们想要的 ...
CSS3实现精美的纸张折角效果 -- 进阶版
改变的要素昨天那个CSS3实现折角,需要到纯色背景下才能比较完美,今天就遇到问题了-背景是渐变的;所以改良一下; 适用于任何背景,控制::before和::after 两个案例,第一个是适用于任何背 ...
backgroundLinearGradient线性渐变制作折角效果
backgroundLinearGradient线性渐变,制作折角效果语法线性渐变 - 从上到下(默认情况下) background: linear-gradient(direction, col ...
css3切角文本框_[CSS揭秘]切角效果
将角切掉也是一种流行的设计风格传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果有了CSS3,我们完全可以使用新技术来实现第一种方案: CSS渐变需求一: 一个矩形需要切 ...
CSS 实现切角效果
最近项目中看到这样的一个切角效果,如下所示就是一个正常的矩形,然后被"切"了一块,而且是沿着右上角切的.那么,这种布局如何实现呢? 一.自适应方式这种布局一般有两种自适应方式, ...
HTML边角钝化效果,CSS实现折角样式效果
实现思路如下: 用linear-gradient实现戒掉右上角的效果用::after实现一个小矩形用linear-gradient截去小矩形的一半用box-shadow制造阴影效果用linea ...
css实现平角切角和弧形切角效果
在web设计中,有时候会碰到一些切角的样式需求,实现方法有很多种,用图片也好,结点叠加覆盖也好,都可以实现切角的样式,这里笔者直接用css来实现切角的样式. 切单一角: background: #58 ...
html中切角文本框,HTML/CSS实现切角矩形效果
非纯色背景下切角矩形的效果图如下: HTML: CSS: .top-box { position: relative; display: block; width: 90%; min-height: ...
html 怎么让div卷角,css实现简约的纸张卷角效果
英文原文 http://designshack.net/articles/css/code-a-simple-folded-corner-effect-with-css/ 这篇文章中我们将介绍如何制做 ...

CSS实现折角效果：

CSS实现折角效果：相关推荐

最新文章

热门文章