CSS3 四边形 凹角写法

最新推荐文章于 2021-08-29 13:12:34 发布
最新推荐文章于 2021-08-29 13:12:34 发布
阅读量355 收藏
点赞数
原文链接：http://www.cnblogs.com/arealy/p/7737062.html
版权 
<!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: 10;
            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>

 

 

转载于:https://www.cnblogs.com/arealy/p/7737062.html

weixin_30302609
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3实现内凹圆角的实例代码
09-24
在CSS3中，实现内凹圆角的效果通常需要用到`border-radius`属性来创建圆角，但这并不能直接产生内凹的形状。文章提到的一种创新方法是利用径向渐变（`radial-gradient`）来模拟内凹圆角效果，这种方法允许背景透明，...
纯CSS简单实现四角内凹圆角
echozly的博客
12-29 4888
平常开发常会用到圆角，外凸很好实现，只要直接使用border-radius属性即可。但如果有内凹角的情况，一般都会直接使用背景图片，但如果没有背景图片的话，纯CSS也可以实现这种效果。 简单内凹 要实现这种内凹圆角比较简单，代码如下： html: <div class="radius"></div> css: 通过改变对应方向即可实现 四个角度的内凹圆角，内凹半径就不需要我多说了，调节px就行 下面说个稍复杂的，四角内凹 单独的元素无法通过CSS实现，
css内凹圆角
西洲
11-22 1万+
1、border-radius 知识点： 1.1、简单语法： border-radius：length/persentage； js语法：object.style.borderRadius="5px" border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。4个角（顺时针方向，左上，右上，右下，左下），每个角都有两个半径，水平半径和垂...
css3 凹角,【CSS】这种凹角用css3如何实现
weixin_42516830的博客
08-03 303
回答：Title.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: 1...
CSS如何实现内凹角效果
热门推荐
W3cplus
04-19 1万+
特别声明：此篇文章内容来源于@ANA TUDOR翻译的《Scooped Corners in 2018》一文。记得@Lea Verou的《CSS Secrets》一书和前...
css实现div内凹角样式
weixin_30487701的博客
06-26 1848
平常的开发中我们一般使用到圆角都是外凸的，即border-radius属性。而如果有内凹角的情况，我们一般的考虑实现方法有2种。一种是直接使用背景图片，一种是使用css。 用到的属性则是background或background-image结合径向渐变radial-gradient。示例： 1 background-image: radial-gradient(200px at 50px...
CSS3 圆角效果
09-25
CSS3的圆角效果是网页设计中的一种常见样式，它允许开发者无需借助图像即可创建具有圆角边框的元素，从而提高网页加载速度并优化用户体验。这个特性在现代浏览器中得到了广泛支持，包括Firefox、Safari、Chrome以及...
CSS3圆形对角导航菜单.zip
最新发布
09-25
《CSS3圆形对角导航菜单详解》 在网页设计领域，导航菜单是不可或缺的一部分，它为用户提供了方便快捷的页面跳转方式。随着技术的发展，CSS3已经为我们提供了丰富的样式和动画效果，使得导航菜单的设计更加多样化和...
CSS3右下角悬浮客服菜单代码
04-02
本篇将深入探讨如何利用CSS3实现右下角悬浮客服菜单的功能，以及相关的在线客服功能。 首先，这个“CSS3右下角悬浮客服菜单代码”旨在为用户提供便捷的在线支持途径，通过点击页面右下角的悬浮图标，可以展开一个...
CSS样式：DIV四中圆形，左右两侧凹陷下去
happy81997的博客
07-28 1283
效果如图： CSS代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>test</title> <style> .btn { width: 200px; text-align: center; height: 50px; line-.
CSS设置边角凹陷
weixin_45929885的博客
08-29 3471
CSS设置边角凹陷 一. 利用border-radius border-radius: 20px; 这样虽然可以,但是设置边框的时候需要注意: border-right:1px red solid; 边框同样也是弯的, 如果想要设置竖线: outline:1px red solid; 二. radial-gradient 利用辐射变化来调整 background-image: radial-gradient(circle at right top, #fff 50px, #0a2c8f
lisp 发凹圆角_你知道怎么利用css实现内凹圆角么
weixin_42213784的博客
12-30 363
本文利用径向渐变来实现背景透明的内凹圆角。基本线性渐变div {height: 100px;width: 200px;background-image: linear-gradient(90deg, red, blue);}从左到右的红到蓝渐变加百分比调整渐变范围div {height: 100px;width: 200px;background-image: linear-gradient(90...
css实现边框内凹
BigDippers的博客
02-27 3535
<div class="box"> <div class="box2"> </div> </div> 首先创建好盒子结构 .box{ width:100px; height:100px; border:1px solid black;/*设置好外边框*/ margin:auto; } .box2{ position:relative;/*相对于父级对齐*/ left:-1px;/*将位置移动-1的目的.
css3 凹角,CSS3渐变
weixin_35815640的博客
08-03 171
css3的渐变还是比较强大的，制作一些常规背景图，如棋盘，房屋地板非常漂亮的，直接上图。地板.png竹子.png桌布.png星盘.pngdiv{margin: 0 auto;width: 600px;height: 600px;/*1.0或者0%起到截断的作用2.颜色重叠的核心：第一个渐变需要留出部分(transparent)空白给第二个渐变使用，否则第二个渐变不会有任何的颜色，该案例中trans...
CSS凹角写法
wgod
06-24 770
<style> .outer{ position: absolute; left: 100px; top: 100px; width: 300px; height: 500px; background-color: #0a6ebd; display: flex; ...
css 圆凹角_这种凹角用css3如何实现
weixin_39638086的博客
12-22 114
css#a {width: 150px;height: 300px;background: radial-gradient(circle at top left,transparent 15px, #e6e4b7 0) top left,radial-gradient(circle at top right,transparent 15px, #e6e4b7 0) top right,radial...
css 圆凹角_在css中创建凹角
weixin_39626409的博客
12-22 141
Is it possible to create concave corners like this in css? If yes, how would you do it?解决方案Here is a good example of how I would tackle this:HTML:CSS:div.concave {background:blue;width:150px;height:12...
css 绘制 简单几何图形
fg_411的专栏
03-24 589
一直对css不在行，今天面试有道题要求用 css 写正三角形，回来之后搜了一下样式发现几个有意思的，就选了几个贴上来，想看更多请 点击这里 //正方形 #square { width: 100px; height: 100px; background: blue; } //圆形 #circle { width: 100px; height: 100px; background: ...
数组去重常见的方法
qweasd222asd的博客
09-14 359
1.Set() 代码： var arr=[1,2,34,5,5,"5","hello","hello","world",88] var set=new Set(arr); var arr=[...set]; console.log(arr) 结果 2.splice() 代码： var arr=[1,2,34,5,5,"5","hello","hello","world",88] function fnc(arr){
css画四边形 一个角30角
07-12
要使用CSS来画一个具有一个30度角的四边形，您可以使用CSS的伪元素和transform属性来实现。以下是一个示例代码： ```css .quadrilateral { position: relative; width: 200px; height: 100px; background-color...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值