边框折角效果

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .image-layer {
 8             width: 384px;
 9             height: 240px;
10             margin: 40px auto 0;
11             position: relative;
12             cursor: pointer;
13             overflow: hidden;
14         }
15
16         .image-layer:before {
17             content: ‘‘;
18             position: absolute;
19             top: 0;
20             right: 0;
21             border: 0px solid;
22             border-color: rgba(0, 0, 0, 0.2) #fff;
23             -webkit-transition: border .5s ease;
24         }
25
26         .image-layer:hover:before {
27             border-right-width: 80px;
28             border-bottom-width: 80px
29         }
30     </style>
31 </head>
32 <body>
33
34
35     <div class="image-layer" id="image-layer">
36         <img src="test.jpg" />
37     </div>
38
39 </body>
40 </html>

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .image-layer {            width: 384px;            height: 240px;            margin: 40px auto 0;            position: relative;            cursor: pointer;            overflow: hidden;        }

        .image-layer:before {            content: ‘‘;            position: absolute;            top: 0;            right: 0;            border: 0px solid;            border-color: rgba(0, 0, 0, 0.2) #fff;            -webkit-transition: border .5s ease;        }

        .image-layer:hover:before {            border-right-width: 80px;            border-bottom-width: 80px        }    </style></head><body>

    <div class="image-layer" id="image-layer">        <img src="test.jpg" />    </div>

</body></html>

时间： 2024-11-16 05:37:37

边框折角效果的相关文章

CSS打造的边框折角效果

<html> <head> <title>CSS打造的边框折角效果</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style type="text/css"> <!-- .curlycontainer{ border: 1px solid #b8b8b8;

本篇文章由:http://xinpure.com/css3-picture-angle-effect/ 图片折角效果主要是通过设置 border 属性实现的效果效果预览效果解析假设我们将一个元素的 width .height 都设置为0,然后再将 border 设置为 80px,上下和左右边框分别为两种不同的颜色即: width: 0; height: 0; border: 80px solid; border-color: #00a67c #333; 这时我们可以看到,四条边框像四个三

CSS3实战开发: 折角效果实战开发

<!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name="keywords" content="css,css3,实战互联网,教程"> <meta name="description" content="css3实现折角效果,折角效果,css3实战尽在实战互联网" >

CSS3实战开发:手把手教大家折角效果实战开发

各位网友,大家好,我是陌上花会开,今天这篇文章,我将手把手教大家如何开发一套纯CSS的折角效果.一如往常,我不提供代码下载,但是我可以保证,只要将教程中的代码复制到本地,绝对百分百获得与我演示的效果一样,希望各位明白我的用意. 好了,直接开始今天的教程吧.首先,我先给大家演示一下今天实战案例的效果: 有人会说这是什么?这就是我们今天的实战开发,我将带领大家开发上图中的右上角折叠效果. 在我讲解完之前,有些人可能觉得很难,不可思议.我想跟你们说:真的so easy.下面就请跟着我的分解步骤一步步学

css3 折角效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>折角效果</title> <style type="text/css"> div { width: 300px; height: 200px; background: #333; position: relative; } div:before { content:

CSS 折角效果

1 <style type="text/css"> .div1 { width: 200px; height: 200px; background-color: #ff6a00; border-width: 6px; margin: 0 auto; } .div2 { position: relative; width: 0; height: 0; border: 20px solid black; border-color:transparent #ffd800 #ffd

div折角~~~

代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>折角效果</title> <style type="text/css"> div { width: 300px; height: 200px; background: #333; position: relative; } div:before { cont

CSS3样式linear-gradient的使用（切角效果）

linear-gradient linear-gradient是CSS3中新增的样式,主要用于颜色的渐变效果.MDN地址 linear-gradient在不同内核下使用方式不同,详细内容可参考w3cplus 实用栗子(在Chrome下) 缺角效果先看效果图 <div class="div1"> 这是内容 </div> .div1 { width: 100px; height: 40px; line-height: 40px; background:linear-

[CSS揭秘]切角效果

将角切掉也是一种流行的设计风格传统解决方案可能是使用三角形或者其他形状的图片来盖住边角从而模拟切角效果有了CSS3,我们完全可以使用新技术来实现第一种方案: CSS渐变需求一: 一个矩形需要切掉一个45°角使用线性渐变来实现 background: #58a linear-gradient(-45deg, transparent 15px, #58a 0); 在渐变中,如果指定stop距离为0则表示与前一个stop的距离一样,所以从15px开始往后都是#58a 效果如下需求二: 一个