CSS3 四边形 凹角写法
<!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 四边形 凹角写法的更多相关文章
- 简单了解css3样式表写法和优先级
css3和css有什么区别?首先css3是css(层叠样式表)技术的升级版本,而css是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...
- 移动端轮播完整版css3加原生写法
<!doctype html><html><head> <meta charset="UTF-8"> <meta name=& ...
- css3网站响应式写法
css3响应式写法因为media不支持ie9以下的浏览器 所有要加个判断<pre> <!-- 全部通用的 --><link rel="stylesheet&qu ...
- 石子合并（直线版+环形版）&（朴素写法+四边形优化+GarsiaWachs算法）
石子合并-直线版 (点击此处查看题目) 朴素写法 最简单常见的写法就是通过枚举分割点,求出每个区间合并的最小花费,从而得到整个区间的最小花费,时间复杂度为O(n^3),核心代码如下: ; i < ...
- css3的媒体查询(Media Queries)
我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="scr ...
- CSS3 之 Media（媒体查询器）
1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...
- CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media=&q ...
- css3 2D转换（2D Transform） 动画（Animation）
transform 版本:CSS3 内核类型 写法 Webkit(Chrome/Safari) -webkit-transform Gecko(Firefox) -moz-transform Pres ...
- css3のborder-radius
css3のborder-radius 今天主要练习了一下border-radius这个属性,这个是最常用的属性,所以先从它开始学习和总结吧. 我觉得需要注意以下几点: 1.书写规范: -webkit- ...
随机推荐
- bleve搜索引擎源码分析之索引——mapping真复杂啊
接下来看看下面index部分的源码实现: data := struct { Name string Des string }{ Name: "hello world this is bone ...
- 创建cell的三种方式
方式一 注册cell -> 无需为cell绑定标识符 [使用UIViewController完成!] l 1> static NSString * const ID = @"c ...
- I.MX6 U-boot编译找不到用户目录
/**************************************************************************** * I.MX6 U-boot编译找不到用户目 ...
- BZOJ4259：残缺的字符串（FFT与字符串匹配）
很久很久以前,在你刚刚学习字符串匹配的时候,有两个仅包含小写字母的字符串A和B,其中A串长度为m,B串长度为n.可当你现在再次碰到这两个串时,这两个串已经老化了,每个串都有不同程度的残缺. 你想对这两 ...
- x86 linux 裁剪过程中能正常跑起来的必要配置项
A .选中Executable file formats/Emulations ---> Kernel support for ELFbinaries -----加载运行rootfs 中的程序. ...
- hdu 3503(有点小技巧的dfs(对结点加东西表示边的某些状态))
Friends Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Sub ...
- Android Debuggerd 简要介绍和源码分析（转载）
转载: http://dylangao.com/2014/05/16/android-debuggerd-%E7%AE%80%E8%A6%81%E4%BB%8B%E7%BB%8D%E5%92%8C%E ...
- P2093 [国家集训队]JZPFAR（KDTree）
传送门 类似于p4357 不过因为距离相等的时候要优先选择序号小的,所以要重载一下运算符 //minamoto #include<bits/stdc++.h> #define R regi ...
- 用set和shopt设置bash选项
1.set命令 -o打开选项,+o关闭选项#set -o //显示选项设置#set -o noclobber //打开该选项,重定向将覆盖已存在的文件#set +o noclobber //关闭该选项 ...
- css覆盖select样式并添加小箭头
.select { border-radius: 5px; border: 1px #F4A627 solid; -webkit-appearance: none;//清除默认样式 backgroun ...