<!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. GrideView（二）---删除功能

    情景一. 没有外键关联, 操作:在数据源中将删除选项选中--- GrideView 中的删除 选项选中 即可情景二. 有外键关联 *RowDeleting 行删除前触发 *RowDeleted 行删除 ...

  2. YTU 2902: H-Sum 3s

    2902: H-Sum 3s 时间限制: 1 Sec  内存限制: 128 MB 提交: 139  解决: 28 题目描述 You are given a number sequence a1,a2, ...

  3. Windows7下安装golang语言开发环境和revel框架

    1.下载先去下载32位或64 golang window 安装包 并安装下载地址:https://www.golangtc.com/download 本人更改了安装地址为 D:\GO\Go 2. go ...

  4. vue 基础知识随笔

    在vue2.0中一个vue实例的生命周期中已经没有ready()了,在vue1.0中才有ready();在vue2.0中立即执行函数使用mounted v-for 参数顺序更新: 数组中使用(valu ...

  5. 2-11 tensorflow常量变量定义

    D:\Users\ZHONGZHENHUA\Anaconda3\envs\tensorflow\Lib\site-packages\tensorflow https://developer.nvidi ...

  6. Mysql数据库的用户和日志管理

    Mysql数据库的用户和日志管理 数据库的用户管理 1.mysql用户账号管理 用户账号 user@host user:账户名称 host:此账户可通过哪些客户端主机请求创建连接线程,可以是ip.主机 ...

  7. Linux 常用命令十五 用户和组操作命令

    一.创建一个用户 wang@wang:~/workpalce/threading$ sudo useradd -m python # -m创建家目录 wang@wang:~/workpalce/thr ...

  8. 洛谷 P3708 koishi的数学题

    找规律发现\( f[i]=f[i-1]+n-\sum_{i的因数和} \) 一A了深(sh)蓝(ui)题的我被找规律绿题卡死 记得开long long #include<iostream> ...

  9. 三种实现AJAX的方法以及Vue和axios结合使用的坑

    前言 之前曾经想自己写一个天气的App,并找到了一个免费的天气数据接口的服务商--和风天气,当时也不懂怎么发HTTP请求,而且也只会用Java语言,看到官方文档里面有一个Java代码示例,就复制了一下 ...

  10. 【SpringCloud构建微服务系列】学习断路器Hystrix

    一.Hystrix简介 在微服务架构中经常包括多个服务层,比如A为B提供服务,B为C和D提供服务,如果A出故障了就会导致B也不可用,最终导致C和D也不可用,这就形成了雪崩效应. 所以为了应对这种情况, ...