内嵌圆角CSS实现
- 前言
开发项目时,经常会遇到如上图左上角和右上角这种内嵌的圆角效果,在以前css3还没有普及时不用说一张图片搞定,但是到现在我们完全可以用css去实现。
- 实现
第一步:思路
仔细观察这个小缺角,它其实是个圆圈的一部分,如果把它补全,应该是这样子的:
为了更直观更显眼,我将圆圈的背景色改为红色,如果是蓝色,就和背景色融为一体了。
我再把小圆圈的边框去掉,就更直观了
所以接下来实现就很简单了,创建一个容器,在左上角和右上角用伪元素定位两个圆圈,并且让容器超出隐藏,完美!
第二步:代码
Html代码:
<ul>
<li class="container">
<div></div>
</li>
</ul>
css代码:
.corner{
content: "";
width: 20px;
height: 20px;
background: #25bdff;
border-radius: 20px;
border:5px #ffd958 solid;
content: "";
position: absolute;
} .container{
border-bottom: 6px solid #c06e32;
border-radius: 10px;
width: 352px;
background: #c06e32;
position: relative;
overflow: hidden;
float: left;
margin: 0 5px 24px 0; &::before{
@extend .corner;
left: -15px;
top: -15px;
} &::after{
@extend .corner;
right: -15px;
top: -15px;
} >div{
background: #fbaf5e;
border:5px #ffd958 solid;
border-radius: 10px;
text-align: center;
padding: 14px 0 20px;
}
}
PS:这里只贴出核心部分,里面的内容概不赘述
题外话
小圆圈的大小怎么确定?
我是在PS里面画了一个圆圈,然后不断调整大小,调整到圆圈的边缘和内嵌的圆角刚刚贴合,就能确定小圆圈的大小了
在线查看效果
https://jsfiddle.net/mcxwbuky/
内嵌圆角CSS实现的更多相关文章
- 『Asp.Net 组件』Asp.Net 服务器组件 内嵌CSS:将CSS封装到程序集中
代码: <span style="font-family:Microsoft YaHei; font-size:12px">using System; using Sy ...
- CSS布局技巧 -- 内凹圆角
圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...
- NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源
NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...
- 13 ,CSS 入门基础,行内排版内嵌式排版和外部排版样式
1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...
- css的三种使用方式:行内样式,内嵌样式,外部引用样式
三中的使用方法的简单实例如下: 行内样式: <!doctype html> <html> <head> <meta charset="UTF-8&q ...
- css边框内凹圆角,解决优惠券的边框问题
关于css边框内凹圆角,找了好久才找到的 <html <head> <title>无标题页</title> <style> body{ backg ...
- PHP,JavaScript,CSS三种HTML内嵌语言的语法,变量,循环,函数记录
PHP PHP简介: PHP 是服务器端脚本语言. PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器")是一种通用开源脚本语言. PH ...
- CSS实现多重边框和内凹圆角
CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)
一.回顾内容 前端的三大组成(三大模块) HTMl(超文本标记语言) 结构层 css(层叠样式表) 表现层:用来美化HTML结构 JS(Java script)(脚本语言) 行为层: ...
随机推荐
- IDEA overwrite报错、languagelevel设置不生效问题
发现idea 倒入项目后,发现@override报错,发现是idea的jdk版本不对,需要设置大于1.5的jdk版本 解决办法: IDEA:File >> Project Structur ...
- jenkins+maven+git持续集成部署问题总结
1.这个问题出现在单独构建一个项目的子模块时,很奇怪,构建父项目没有问题. Executing Maven: -N -B -f /root/.jenkins/workspace/newMer/pom. ...
- mybatis 映射生成mapper和pojo ---逆向工程的使用过程
使用逆向工程生成mapper和pojo 2. 新建一个项目,随便叫什么 3.导入mybatis-generator-core .mybatis.mybatis-spring.log4j等jar 4.在 ...
- (20/24) webpack实战技巧:watch实现热打包和添加代码备注
在前面的学习中,我们一直使用webpack-dev-server充当(本地)服务器和完成打包任务,但是当出项目团队联合开发,共同使用一个服务器时,这时候我们需要实时进行打包以确保团队间能进行联调或者进 ...
- 基础Gan代码解析
initializer总结: #f.constant_initializer(value) 将变量初始化为给定的常量,初始化一切所提供的值. #tf.random_normal_initializer ...
- python3 在文件确实存在的情况下,运行提示找不到文件
提示 [Errno 2] No such file or directory: 但是路径下确实存在此文件,在不改动的情况下,再次运行,执行成功. 百思不得其解,看到此链接下的回答 http://bbs ...
- 1_Python历史及入门
前提:简述CPU 内存 硬盘 操作系统 应用程序CPU:计算机的运算核心和控制核心,好像人类的”大脑“内存:负责数据与CPU直接数据交流处理,将临时数据和应用程序加载到内存,然后在交由CPU处理. 造 ...
- 如何解决 快速点击多次触发的bug 期望快速点击只一次生效
var lastClick; lockClick(){ var nowClick = new Date(); if (lastClick === undefined) { lastClick = no ...
- vue 动态添加 <style> 样式 vue动态添加 绑定自定义字体样式
created(){ //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css&qu ...
- Apple watch ,小米微信通知
Applewatch怎么显示微信通知?iWatch显示微信消息通知设置方法.大家都知道Applewatch上收到微信消息,iWatch是不会显示通知的,需要用户自行设置才行.下面小编来教大家如何设置A ...