<!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. YTU 2920: Shape系列-7

    2921: Shape系列-7 时间限制: 1 Sec  内存限制: 128 MB 提交: 156  解决: 129 题目描述 小强做的Shape类在本次的测试中出了点状况,发现原来是其中的area函 ...

  2. YTU 1020: I think it

    1020: I think it 时间限制: 1 Sec  内存限制: 32 MB 提交: 501  解决: 63 题目描述 Xiao Ming is only seven years old, No ...

  3. mac系统下设置eclipse的补全快捷键方法

    eclispe Word Completion 的默认快捷键是Alt+/eclipse Content Assist 的默认快捷键是Ctrl+Space在使用中发现Word Completion经常导 ...

  4. android 设置textview中划线效果

    textView.getPaint().setFlags(Paint. UNDERLINE_TEXT_FLAG ); //下划线   textView.getPaint().setAntiAlias( ...

  5. poj-1655 Balancing Act(树的重心+树形dp)

    题目链接: Balancing Act Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 11845   Accepted: 4 ...

  6. Codeforces 633H. Fibonacci-ish II

    题目大意: 一个数列 q次询问 每次询问l r 将数列中l-r的位置排序去重后的数列成为b 输出 sigma b i * F i (其中F i为斐波那契数列中的第i项) 思路: 由于要去重 考虑权值线 ...

  7. 转3xian之所在 (一位ACM大牛的博文)

    3xian的经历和见解...我深思... 最后一天,漫天飘起了雪花,假装欢送我离去. 这次WF之战不太顺利,早期的C题大概花了1秒钟构思,然而由于输出格式多了一个空格直到两个半小时才逃脱Wrong A ...

  8. Vue解决安卓4.4不兼容的问题

    1.npm安装 npm install babel-polyfillnpm install es6-promise package.json中会出现 "babel-polyfill" ...

  9. Ubuntu10.04安装与配置nfs服务器（转载）

    转自:http://blog.chinaunix.net/uid-25885064-id-3177969.html 1.安装nfs服务   $ sudo apt-get install nfs-ker ...

  10. 【转】Postman 使用方法详解

    1.Postman背景介绍 用户在开发或者调试网络程序或者是网页B/S模式的程序的时候是需要一些方法来跟踪网页请求的,用户可以使用一些网络的监视工具比如著名的Firebug等网页调试工具.今天给大家介 ...