<!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. HDU1166 敌兵布阵 —— 线段树单点修改

    题目链接:https://vjudge.net/problem/HDU-1166 C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布 ...

  2. sphinx是支持结果聚类的

    Coreseek 4.1 参考手册 / Sphinx 2.0.1-beta Sphinx--强大的开源全文检索引擎,Coreseek--免费开源的中文全文检索引擎 版权 © 2001-2011 And ...

  3. 后缀数组 hash求LCP BZOJ 4310: 跳蚤

    后缀数组的题博客里没放进去过..所以挖了一题写写 充实下博客 顺便留作板子.. 一个字符串S中 内容不同的子串 有 sigma{n-sa[i]+1-h[i]}   (噢 这里的h[]就是大家熟知的he ...

  4. String模块ascii_letters和digits

    Python3中String模块ascii_letters和digits方法,其中ascii_letters是生成所有字母,从a-z和A-Z,digits是生成所有数字0-9. 示例如下: Pytho ...

  5. jquery 插件2014

    jquery Plugins:http://plugins.jquery.com/ Amazon Side Bar Menu http://plugins.jquery.com/amazonsideb ...

  6. MySQL基础操作——转

    原文: [培训]MySQL yum安装mysql:yum -y install mysql*- 或者 yum -y install mysql* 启动数据库服务:/etc/init.d/mysqld ...

  7. 转：Oculus Unity Development Guide开发指南(2015-7-21更新)

    http://forum.exceedu.com/forum/forum.php?mod=viewthread&tid=34175 Oculus Unity Development Guide ...

  8. bzoj 4825: [Hnoi2017]单旋【dfs序+线段树+hash】

    这个代码已经不是写丑那么简单了--脑子浆糊感觉np++分分钟想暴起打死我--就这还一遍A过了-- 先都读进来hash一下,因为是平衡树所以dfs序直接按照点值来就好 对于每个操作: 1:set维护已插 ...

  9. zoj 2760 How Many Shortest Path【最大流】

    不重叠最短路计数. 先弗洛伊德求一遍两两距离(其实spfa或者迪杰斯特拉会更快但是没必要懒得写),然后设dis为st最短距离,把满足a[s][u]+b[u][v]+a[v][t]==dis的边(u,v ...

  10. [SDOI2019] 移动金币

    分析 阶梯NIM模型:共有m+1堆石子,石子总数不超过n-m,求必胜的,即奇数堆石子数目异或和非零的局面数.补集转化,答案C(n,m)-奇数堆石子数目异或和位0的局面数. 可以想到按位dp,设f[i, ...