CSS实现标题样式（自用笔记）

纯CSS实现简单标题样式

说明：

ribbon为公用样式，ribbon1-6对应6个样式，：border，：after 是伪元素

import React from 'react';
import './index.css'const Title = () => {return (<div><section><h2><span>CSS3实现一些标题样式</span></h2><div class="ribbon"><span class="ribbon1"><span>这是一台机器</span></span></div><div class="ribbon"><span class="ribbon2">这<br />是<br />一<br />台<br />机<br />机器</span></div><div class="ribbon"><span class="ribbon3">这是一台机器</span></div><div class="ribbon"><span class="ribbon4">这是一台机器</span></div><div class="ribbon"><span class="ribbon5">这是一台机器</span></div><div class="ribbon"><div class="wrap"><span class="ribbon6">这是一台机器</span></div></div></section></div>);
}export default Title;

.ribbon {display: inline-block;width: 48%;height: 188px;position: relative;float: left;margin-bottom: 30px;/* background: url(); */background-color: antiquewhite;background-size: cover;text-transform: uppercase;color: white;}.ribbon:nth-child(even) {margin-right: 4%;}@media (max-width: 500px) {.ribbon {width: 100%}.ribbon:nth-child(even) {margin-right: 0%;}}.ribbon1 {position: absolute;top: -6px;right: 10px;}.ribbon1:after {position: absolute;content: '';display: block;width: 0;height: 0;border-top: 10px solid #f8463f;border-left: 53px solid transparent;border-right: 53px solid transparent;}.ribbon1 span {position: relative;display: inline-block;text-align: center;background: #F8463F;font-size: 14px;line-height: 1;padding: 12px 8px 10px;border-top-right-radius: 8px;width: 90px;
}.ribbon1 span:before, .ribbon1 span:after {position: absolute;content: "";display: block;
}.ribbon1 span:before {background: #F8463F;height: 6px;width: 6px;left: -6px;top: 0;
}.ribbon1 span:after {background: #C02031;height: 6px;width: 8px;border-radius: 8px 8px 0 0;left: -8px;top: 0;
}.ribbon2 {display: inline-block;width: 60px;padding: 10px 0;background: #F47530;top: -6px;left: 25px;position: absolute;text-align: center;border-top-left-radius: 3px;}.ribbon2:before {height: 0;width: 0;border-bottom: 6px solid #8D5A20;border-right: 6px solid transparent;right: -6px;top: 0;}.ribbon2:before, .ribbon2:after {content: "";position: absolute;}.ribbon2:after {height: 0;width: 0;border-left: 30px solid #F47530;border-right: 30px solid #F47530;border-bottom: 30px solid transparent;bottom: -30px;left: 0;}.ribbon3 {display: inline-block;position: absolute;width: 150px;height: 50px;line-height: 50px;padding-left: 15px;background: #59324C;left: -8px;top: 20px}.ribbon3:before, .ribbon3:after {content: "";position: absolute;}.ribbon3:before {height: 0;width: 0;border-bottom: 8px solid black;border-left: 8px solid transparent;top: -8px;left: 0;}.ribbon3:after {height: 0;width: 0;border-top: 25px solid transparent;border-bottom: 25px solid transparent;border-left: 15px solid #59324C;right: -15px;}.ribbon4 {position: absolute;top: 15px;padding: 8px 10px;background: #00B3ED;box-shadow: -1px 2px 4px rgba(0,0,0,0.5);}
.ribbon4:before, .ribbon4:after {position: absolute;content: "";display: block;
}
.ribbon4:before {width: 7px;height: 100%;padding: 0 0 7px;top: 0;left: -7px;background: inherit;border-radius: 5px 0 0 5px;
}
.ribbon4:after {width: 5px;height: 5px;background: rgba(0,0,0,0.35);bottom: -5px;left: -5px;border-radius: 5px 0 0 5px;}.ribbon5 {display: inline-block;width: calc(100% + 20px);height: 50px;line-height: 50px;text-align: center;margin-left: -10px;margin-right: -10px;background: #EDBA19;position: relative;top: 20px;}.ribbon5:before {content: "";position: absolute;height: 0;width: 0;border-top: 10px solid #cd8d11;border-left: 10px solid transparent;bottom: -10px;left: 0;}.ribbon5:after {content: "";position: absolute;height: 0;width: 0;border-top: 10px solid #cd8d11;border-right: 10px solid transparent;right: 0;bottom: -10px;}.wrap {width: 100%;height: 188px;position: absolute;top: -8px;left: 8px;overflow: hidden;}.wrap:before {content: "";display: block;border-radius: 8px 8px 0px 0px;width: 40px;height: 8px;position: absolute;right: 100px;background: #4D6530;}.wrap:after {content: "";display: block;border-radius: 0px 8px 8px 0px;width: 8px;height: 40px;position: absolute;right: 0px;top: 100px;background: #4D6530;}.ribbon6 {display: inline-block;text-align: center;width: 200px;height: 40px;line-height: 40px;position: absolute;top: 30px;right: -50px;z-index: 2;overflow: hidden;transform: rotate(45deg);-ms-transform: rotate(45deg);-moz-transform: rotate(45deg);-webkit-transform: rotate(45deg);-o-transform: rotate(45deg);border: 1px dashed;box-shadow:0 0 0 3px #57DD43,  0px 21px 5px -18px rgba(0,0,0,0.6);background: #57DD43;}

CSS实现标题样式（自用笔记）相关推荐

amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
amazeui学习笔记--css（基本样式4）--打印样式Print
amazeui学习笔记--css(基本样式3)--打印样式Print 一.总结 1.打印显示url方法: 利用 CSS3 content 属性,将 <a> 和 <abbr> 的 ...
amazeui学习笔记--css（基本样式）--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
amazeui学习笔记--css（基本样式2）--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
【读书笔记】【WebKit技术内幕（二）】Chromium Webkit资源加载与网络栈、DOM树、HTML解释器、影子DOM、CSS解释器和样式布局、网页层次与渲染、绘图上下文、
文章目录前言 Something great 第4章资源加载和网络栈 Webkit 资源加载 Chromium多进程资源加载 Chromium 网络栈第5章 HTML解释器和DOM模型 DOM模 ...
css+js+jq实训笔记
css+js+jq实训笔记 css第一天 css第二天 css第三天 css第四天 css第五天 css第六天 js第一天 js第二天 js第三天 js第四天 js第五天 js第六天 jq第一天 jq ...
Html 和 Css 的关系（复习笔记）
根据慕课网课程所做的笔记HTML+CSS基础教程第一章 HTML5介绍 1.css是用来修饰html样式的 2.html本身是有一些默认样式,如果我们想改变html标签的样式,就需要借助css 3. ...
php怎么自定义设置打印区域,JavaScript_jQuery实现区域打印功能代码详解，使用CSS控制打印样式，需要设 - phpStudy...
jQuery实现区域打印功能代码详解使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO ...
好程序员web前端分享CSS Bug、CSS Hack和Filter学习笔记
为什么80%的码农都做不了架构师?>>> CSS Bug.CSS Hack和Filter学习笔记 1)CSS Bug:CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在 ...
css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...

CSS实现标题样式（自用笔记）

纯CSS实现简单标题样式

说明：

CSS实现标题样式（自用笔记）相关推荐

最新文章

热门文章