• 前言

开发项目时,经常会遇到如上图左上角和右上角这种内嵌的圆角效果,在以前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实现的更多相关文章

  1. 『Asp.Net 组件』Asp.Net 服务器组件 内嵌CSS:将CSS封装到程序集中

    代码: <span style="font-family:Microsoft YaHei; font-size:12px">using System; using Sy ...

  2. CSS布局技巧 -- 内凹圆角

    圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...

  3. NanUI文档 - 打包并使用内嵌式的HTML/CSS/JS资源

    NanUI文档目录 NanUI简介 开始使用NanUI 打包并使用内嵌式的HTML/CSS/JS资源 使用网页来设计整个窗口 如何实现C#与Javascript相互掉用(待更新...) 如何处理Nan ...

  4. 13 ,CSS 入门基础,行内排版内嵌式排版和外部排版样式

    1.认识 CSS 2.传统 HTML 设计网页版面的缺点 3.CSS 的特点 4.CSS 的排版样式 13.1 认识CSS CSS的英文全名是 Cascading Style Sheets,中文可翻译 ...

  5. css的三种使用方式:行内样式,内嵌样式,外部引用样式

    三中的使用方法的简单实例如下: 行内样式: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  6. css边框内凹圆角,解决优惠券的边框问题

    关于css边框内凹圆角,找了好久才找到的 <html <head> <title>无标题页</title> <style> body{ backg ...

  7. PHP,JavaScript,CSS三种HTML内嵌语言的语法,变量,循环,函数记录

    PHP PHP简介: PHP 是服务器端脚本语言. PHP(全称:PHP:Hypertext Preprocessor,即"PHP:超文本预处理器")是一种通用开源脚本语言. PH ...

  8. CSS实现多重边框和内凹圆角

    CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  9. HTML+CSS教程(四)选择器(id选择器,类选择器,标签选择器,子代选择器,后代选择器,组选择器,伪类选择器)/css引入页面的形式(行内样式、内嵌样式、外联样式)

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

随机推荐

  1. (Python基础)集合操作

    集合是一个无序的,不重复的数据组合,它的主要作用如下: 去重,把一个列表变成集合,就自动去重了 关系测试,测试两组数据之前的交集.差集.并集等关系 以下代码演示了去重,增删改查,以及关系测试供参考学习 ...

  2. pil库的介绍与应用

    PIL (Python Image Library) 库是Python 语言的一个第三方库,PIL库支持图像存储.显示和处理,能够处理几乎所有格式的图片. 一.PIL库简介 1. PIL库主要有2个方 ...

  3. 1. vs code 设置快捷键与eclipse一样

    keybindings.json文件路径在:C:\Users\Administrator\AppData\Roaming\Code\User\keybindings.json { "key& ...

  4. css边框的一些属性

    边框样式值如下:none : 无边框.与任何指定的border-width值无关hidden : 隐藏边框.IE不支持dotted : 在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5 ...

  5. [Linux]Ubuntu与终端破墙

    参考:https://www.jianshu.com/p/941bf811f9c2 亲测在ubuntu-14.04.4-desktop-amd64.iso上安装成功 福利:https://github ...

  6. TCPlayer web切换播放问题

    遇到播放的视频无法切换的问题,,即便是清除标签重新生成也不行~~ 需要使用自带的API ~别无他法 demo: http://imgcache.qq.com/open/qcloud/video/tcp ...

  7. 剑指offer——栈的压入、弹出序列

    题目:输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个栈是否为该栈的弹出顺序.假设压入栈的所有数字都不相等.例如序列1,2,3,4,5是某个栈的压入顺序,序列4,5,3,2,1是该栈序列的一 ...

  8. Autowried注解和Resource注解的区别

    目录 1.概述 2.Autowried 3.Resource 4.总结 1.概述 在使用Spring框架的过程中, 依赖注入是必须的, 大多时候会使用Autowried注解来进行依赖注入, 但是也可以 ...

  9. tensorflow_目标识别object_detection_api,RuntimeError: main thread is not in main loop,fig = plt.figure(frameon=False)_tkinter.TclError: no display name and no $DISPLAY environment variable

    最近在使用目标识别api,但是报错了: File "/usr/local/lib/python2.7/dist-packages/tensorflow/python/ops/script_o ...

  10. eclipse与idea快捷键对比以及idea debug、git快捷键

    eclipse与idea快捷键 表格中的空格都是忘记了~ 功能 eclipse idea 生成返回值对象 alt+shift+L ctrl+alt+V 找到启动类   ctrl+alt+Home 类的 ...