<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .outer{

            position: absolute;

            left: 100px;

            top: 100px;

            width: 300px;

            height: 500px;

            background-color: #0a6ebd;

            display: flex;

            justify-content: center;

            align-items: center;

            box-sizing: border-box;

            border: 1px solid #0a6ebd;

        }

        .inner-1{

            width: 250px;

            height: 450px;

            box-sizing: border-box;

            background-color: #0da6ec;

            position: relative;

            display: flex;

            justify-content: center;

            align-items: center;

            border: 1px solid red;

            border-top-left-radius: 25px;

        }

        .inner-2{

            width: 200px;

            height: 400px;

            box-sizing: border-box;

            background-color: #00bcd4;

            position: relative;

            border: 1px solid red;

            border-top-left-radius: 25px;

        }

        .left-corner{

            width: 25px;

            height: 25px;

            /* border-radius: 100%; */

            border-bottom-right-radius: 100%;

            background-color: inherit;

            position: absolute;

            left: -1px;

            top: -1px;

            z-index:;

            border-bottom: 1px solid red;

            border-right: 1px solid red;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

    <div class="outer">

        <div class="inner-1">

            <div class="left-corner" style="background-color: #0a6ebd;"></div>

            <div class="inner-2">

                <div class="left-corner" style="background-color: #0da6ec;"></div>

            </div>

        </div>

    </div>

</body>

</html>

CSS3 四边形 凹角写法的更多相关文章

  1. 简单了解css3样式表写法和优先级

    css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  2. 移动端轮播完整版css3加原生写法

    <!doctype html><html><head> <meta charset="UTF-8"> <meta name=& ...

  3. css3网站响应式写法

    css3响应式写法因为media不支持ie9以下的浏览器 所有要加个判断<pre> <!-- 全部通用的 --><link rel="stylesheet&qu ...

  4. 石子合并（直线版+环形版）&（朴素写法+四边形优化+GarsiaWachs算法）

    石子合并-直线版 (点击此处查看题目) 朴素写法 最简单常见的写法就是通过枚举分割点,求出每个区间合并的最小花费,从而得到整个区间的最小花费,时间复杂度为O(n^3),核心代码如下: ; i < ...

  5. css3的媒体查询(Media Queries)

    我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...

  6. CSS3 之 Media（媒体查询器）

    1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...

  7. CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全

    媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...

  8. css3 2D转换（2D Transform） 动画（Animation）

    transform 版本:CSS3 内核类型 写法 Webkit(Chrome/Safari) -webkit-transform Gecko(Firefox) -moz-transform Pres ...

  9. css3のborder-radius

    css3のborder-radius 今天主要练习了一下border-radius这个属性,这个是最常用的属性,所以先从它开始学习和总结吧. 我觉得需要注意以下几点: 1.书写规范: -webkit- ...

随机推荐

  1. vim记住上次编辑和浏览位置

    在用户自己的目录下的.vimrc中添加, "remember last update or view postion" " Only do this part when ...

  2. ubuntu LNMP环境下安装Redis，以及php的redis扩展

    1.下载 sudo wget http://download.redis.io/releases/redis-4.0.9.tar.gz 2.解压 sudo tar zvxf redis-4.0.9.t ...

  3. 使用C#开发HTTP服务器系列之访问主页

    各位朋友大家好,我是秦元培,欢迎大家关注我的博客,我的博客地址是http://qinyuanpei.com.在这个系列文章的第一篇中,我们着重认识和了解了HTTP协议,并在此基础上实现了一个可交互的W ...

  4. uoj 30 tourists

    题目大意: 一个无向图 每个点有权值 支持两个操作 1 修改某个点的权值 2 查询a-b所有简单路径的点上的最小值 思路: 可以把图变成圆方树 然后树链剖分 维护 对于每个方点使用可删堆维护 #inc ...

  5. Java总结基础知识

    权限关键字: public:可以被所有其他类所访问,不同的包 protected:当前类的成员.同一个包中.不同包中对子类可见父类protected,继承类 default:同一包中的类可以访问,声明 ...

  6. BZOJ_2118_墨墨的等式_最短路

    BZOJ_2118_墨墨的等式_最短路 Description 墨墨突然对等式很感兴趣,他正在研究a1x1+a2y2+…+anxn=B存在非负整数解的条件,他要求你编写一个程序,给定N.{an}.以及 ...

  7. Gerrit代码Review实战

    代码审核(Code Review)是软件研发质量保障机制中非常重要的一环,但在实际项目执行过程中,却因为种种原因被Delay甚至是忽略.在实践中,给大家推荐一款免费.开放源代码的代码审查软件Gerri ...

  8. vue 生命周期钩子 过滤器 计算属性

    每一个Vue实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测.编译模板.挂载实例到DOM,然后在数据变化时更新DOM,在这个过程中,实例也会调用一些生命周期钩子,这就给我们提供了 ...

  9. AutoMapper封装类

    /// <summary> /// AutoMapper扩展帮助类 /// </summary> public static class AutoMapperHelper { ...

  10. 关于CentOS 7安装jdk1.8

    安装之前先检查一下系统有没有自带open-jdk 命令: rpm -qa |grep java rpm -qa |grep jdk rpm -qa |grep gcj 如果没有输入信息表示没有安装. ...