CSS边角折叠实战

最新推荐文章于 2024-10-04 06:11:34 发布
最新推荐文章于 2024-10-04 06:11:34 发布
阅读量127 收藏
点赞数
文章标签： xhtml photoshop
原文链接：https://my.oschina.net/u/1401419/blog/181251
版权

为什么80%的码农都做不了架构师？>>> hot3.png

CSS边角形状效果

,4
23

     在大量的网页设计作品中，都用到了这种折叠效果，通常用于标题背景。一般可以用PhotoShop来实现这样的效果，但是在当今广泛提倡减少网页图片使用量的情况下，我们还是少用图片为好。其实使用CSS是可以很容易地实现这种效果的，废话少说，直接上代码：

01 <!DOCTYPE html> 
02 <html xmlns="http://www.w3.org/1999/xhtml">
03 <head>
04 <meta charset="utf-8">
05 <title>CSS Shapes</title>
06 <style type="text/css">
07 <!--
08 #container {
09     background: #666;
10     margin: auto;
11     width: 500px;
12     height: 700px;
13     padding-top: 30px;
14 }
15 h1 {
16     background: #e3e3e3;
17     background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8);
18     background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#c8c8c8));
19     padding: 10px 20px;
20     margin-left: -20px;
21     margin-top: 0;
22     position: relative;
23     width: 70%;
24     -moz-box-shadow: 1px 1px 3px #292929;
25     -webkit-box-shadow: 1px 1px 3px #292929;
26     box-shadow: 1px 1px 3px #292929;
27     color: #454545;
28     text-shadow: 0 1px 0 white;
29 }
30 .arrow {
31     width: 0;
32     height: 0;
33     line-height: 0;
34     border-left: 20px solid transparent;
35     border-top: 10px solid #c8c8c8;
36     top: 104%;
37     left: 0;
38     position: absolute;
39 }
40 -->
41 </style>
42 <!--[if IE]>
43 <style>
44 .arrow {
45     top: 100%;
46 }
47 </style>
48 <![endif]-->
49 </head>
50  
51 <body>
52 <div id="container">
53     <h1> 我的标题 <span class="arrow"></span> </h1>
54 </div>
55 </body>
56 </html>
   点此可以预览以上代码的运行结果，可能IE下的效果比较单调，再次鄙视IE。这里的关键技术是class="arrow"这个类，它产生了一个三角形状，让你看起来就像是一条带子被折叠了一样，控制这个类的CSS代码为：


01 .arrow {
02     width: ;
03     height: ;
04     line-height: ;
05     border-left: 20px solid transparent;
06     border-top: 10px solid #c8c8c8;
07     top: 104%;
08     left: ;
09     position: absolute;
10 }

     这其中关键的属性是border-left 和 border-top，这两个属性形成了一个三角形效果，也就是带子的拐角效果，你可以将以上代码的5、6行，做如下更改，看看效果：

1 border-right: 20px solid transparent;
2 border-top: 10px solid #c8c8c8;

     再做一次更改，看看什么效果：

1 border-left: 20px solid transparent;
2 border-bottom: 10px solid #c8c8c8;

     通过这几次更改，你可以看到，border-right、border-left和border-bottom、border-top的不同组合，可以实现三角形的不同的朝向，你可以举一反三制作你的折叠效果了。

转载于:https://my.oschina.net/u/1401419/blog/181251

weixin_33709364
关注
css 实现动画折叠展开_CSS 3D折叠动画
culuo8053的博客
08-01 4504
css 实现动画折叠展开Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoSt...
CSS之折叠菜单
菜鸟成长日记
05-21 1627
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <ul id="menu"> <li> &lt.
css-折角效果
weixin_41824429的博客
10-09 468
css-折角效果
css3实现缺角四边形_利用CSS3实现折角效果实例源码
weixin_35950078的博客
12-23 256
先来看看静态的效果图实例代码复制代码代码如下:body {background-color: #eaf0f2;}h1{text-align: center;}.box{width:500px;height:300px;margin:0 auto;position:relative;}.img-layer{position: absolute;width: 500px;height: 300px;t...
css实现角折叠效果
qq_40482686的博客
01-30 2033
html div class="angle">div>div>div> css .angle{ position: absolute; left: 0; top: 0; width: 20px; height: 20px; background-color: #345070; border-width: 6px; ma
css如何使图片在右下角,这个右下角折角用css怎么画出来？
weixin_29468281的博客
08-03 1501
可以通过伪类的border-color来实现。HTMLCSS.bg{padding:10px;background: #262a67}.paper{background:#00b5e9;width:500px;height:500px;position: relative;}.paper:before{content:"";position: absolute;right:0;bottom:0;d...
CSS高效开发实战
12-31
《CSS高效开发实战：CSS 3、LESS、SASS、Bootstrap、Foundation》写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈，确保读者可以运用一些工具、框架、预处理来提升开发效率和节约人力成本，确保所讲解的内容...
Css3折叠菜单-可展开的树形导航菜单.rar
07-10
Css3折叠菜单-可展开的树形导航菜单，其实就是折叠、展开式的菜单，应用了HTML5重绘而成，无使用jquery，完全CSS3技术实现，面向Android手机等移动终端设备浏览，请注意不要使用IE等浏览器查看效果。
css 实现矩形四个边角加粗的方法
01-21
1、工具/原料 ... css ... <h1 xss=removed>css实现矩形边角加粗 <span></span> <span></span> <span></span> <span></span> </body> css代码 body{ display: flex; justify-conten
用css画一个倒三角
aweo960421621的博客
09-04 1044
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...
css实现折叠样式实现
qq_39176307的博客
05-06 5094
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、实现思路二、实现代码三、效果 前言 通过html+css实现折叠样式 一、实现思路 动态修改元素的高度，并添加过渡效果。 二、实现代码 html代码： <div class="fold"> <div class="child0">选项一</div> <div class="child1">选项11</div> <div .
CSS3实现精美的纸张折角效果
CRPER
10-28 8143
预备知识 CSS定位 CSS三角实现 CSS圆角及伪类,盒子阴影 在自己做的项目的某个地方需要用到折角效果,折腾了下就拿出来分享了;
css折角的简单实现 真实项目实践
会点php的前端小渣渣
02-01 285
这么久以来，第一次用了折角的效果，哈哈。先来看下这个 折角的效果图： 直接上代码： 关键代码： <style> .wu{ color: #fff; background:linear-gradient(-135deg, #EDEDED 2em,#cccccc 0) !important; position: relative; } /****** ..
HTML与CSS如何创建悬停折角纸叠效果
X W F
08-20 358
折角折叠效果，在网站实际运用中也是非常多，当你将鼠标悬停在上面时，就会在某些网站上看到它的折角。在这里，我们仅用HTML与CSS来实现折角效果。 以下内容将具体讲解如何创建这个效果。在本文中，我们将文章分为两部分，在第一部分中，我们将创建基本结构。在第二部分中，我们将装饰结构。 首先，我们先使用HTML来创建一个转角折叠效果的结构。 在HTML代码中，我们将使用div标记创建一个基本div，并为其指定一个类名。 HTML代码如下： <!DOCTYPE html> <html lang="
使用Sass制作倾斜角度
qq_32506555的博客
11-01 448
倾斜角，是指一个区域它的顶部或底部边缘不是完全水平而是倾斜的。本文和大家介绍的就是使用Sass实现倾斜角度的方法，希望可以帮助大家更好的学习Sass，一起来看看吧。 　实现这种效果有很多种方法。例如可以将 base64 编码的图片应用为背景，但这会使得它很难自定义（颜色，角度等）。 　　另一种方法是倾斜或旋转绝对定位的伪元素，然而倾斜变换是我最不愿意处理的一件事。 　　使用Sa
html知识点之利用css四边形切角并且加上边框
小糖豆
09-14 4367
前言 这几个月做了很多前端工作，其中一个需求还是蛮头疼，UI给的图上面的四边形是一个带斜边的，直接用背景图可以实现，但是会出现各种布局的问题，比如内容太大了，边框不会跟着扩大，废话不多说，这里写一些如何利用css话四边形带有斜边，并且给斜边加边框，在这之前，先简单说一下需要用到的函数 linear-gradient()函数 #grad { background-image: linear-gradient(red, yellow, blue); } 看上面的代码是从头部开始的线性渐变，从红色开始，转为
CSS中的外边距折叠问题及其4种解决方法总结（完整版）
surymy
12-30 3137
外边距折叠一、概念二、兄弟元素三、父子元素 一、概念 一般是指垂直方向相邻的外边距会发生重叠现象，大多发生在兄弟元素和父子元素之间。 二、兄弟元素 box2是box1的兄弟元素 当两者都是正值时：取二者之间的最大值 <style> .box1{ width: 200px; height: 200px; background-color: tomato; margin-bott
XHTML 简介
最新发布
wjs2024的博客
10-04 733
XHTML作为一种严格的、基于XML的标记语言，为网页设计和开发提供了良好的可读性、可维护性和扩展性。尽管HTML5已成为当前主流的网页标记语言，但XHTML在特定领域仍然具有广泛的应用价值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值