• 前言

开发项目时,经常会遇到如上图左上角和右上角这种内嵌的圆角效果,在以前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. jmeter多sql查询

    背景:实现多条sql语句,取多个值的情况 步骤:1.JDBC Connection Configuration配置添加?allowMultiQueries=true 2.增加sql语句 ,查询或修改语 ...

  2. 题 FatMouse‘Trade

    FatMouse准备了M磅的猫食,准备与守卫仓库的猫交易,这些猫包含他最喜欢的食物,JavaBean. 仓库有N个房间.第i间房间包含J [I]磅的JavaBeans,并且需要F [i]磅的猫粮.Fa ...

  3. c++ std 最小堆的使用 (用于实现top100之类的功能)

    #include<vector>#include<algorithm>#include<iostream> using namespace std; void Pr ...

  4. N个工作日后的日期

    这里对特殊日期采用了模拟的方式,在实际开发中当然这些数据是从数据库中读取,调用方法时 只需传入开始时间(一般当前) 和N(代表N个工作日) /// <summary> /// 获取时间 / ...

  5. 实战ELK(9) Elasticsearch地理位置

    地理坐标点(geo-point) 是指地球表面可以用经纬度描述的一个点.地理坐标点可以用来计算两个坐标位置间的距离,或者判断一个点是否在一个区域中.地理坐标点不能被动态映射(dynamic mappi ...

  6. Flutter环境搭建

    本文介绍mac上搭建Flutter环境 1.Flutter官方提供中国地区镜像地址:https://github.com/flutter/flutter/wiki/Using-Flutter-in-C ...

  7. Python学习日记 --day2

    Python学习日记 --day2 1.格式化输出:% s d  (%为占位符 s为字符串类型 d为数字类型) name = input('请输入姓名') age = int(input('请输入年龄 ...

  8. MPC学习笔记1:基于状态空间模型的预测控制(1)

    MPC调节器 1.给定一个由状态空间法描述的离散系统: MPC控制器与其他线性二次调节器(LQR)的区别就在于其可以很好的将系统动态约束纳入考虑. 采样周期Ts控制了算法的效率,太大会错过很多系统运行 ...

  9. 转: Ext.data.Store 修改Post请求

    Extjs 4.0版本 var Store = Ext.create('Ext.data.Store', { pageSize: pageSize, model: 'Ext.data.Model名称' ...

  10. [RUNOOB]C++继承

    REF: http://www.runoob.com/cplusplus/cpp-inheritance.html 一.基类和派生类 程序: #include "stdafx.h" ...