从右上角和右下角创建反向边框 [英] Create reverse border from top right and bottom right

问题描述

我已使用此链接使用 css3 反转边框半径 来实现我的目标但无法创建相同的形状

I have used this link Reverse border radius with css3 to achieve my goal but unable to create the same shape

查看下面的代码

body {
        background: #ff0015;
        padding: 50px;
    }

    .box {
        float: left;
        width: 50px;
        padding: 10px 15px;
        height: 30px;
        position: relative;
        background: #fff;
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
    }

    .box:before,
    .box:after {
        content: "";
        position: absolute;

        height: 10px;
        width: 20px;

        bottom: 0;
    }

    .box:after {
        right: 0;
    border-radius: 10px 0 0 0px;
    box-shadow: 0px 10px 0 0 #fff;
    bottom: -5px;
    }

    .box:before {
        top: -5px;
    border-radius: 0 0px 0px 10px;
    box-shadow: 0px -10px 0 0 #fff;
    right: 0;
    }

<div class="box"></div>

推荐答案

你可以使用 radial-gradient 代替 border-radius .

you may use radial-gradient instead border-radius .

使用透明颜色，它还可以让您使用filter添加阴影或边框:

With a transparent color, it can also allow you to add a shadow or a border with a filter:

html {
  background: linear-gradient(45deg, #ff0015 , blue,yellow,gray,purple,green,silver) 0 0 /100vw 100vh;
  padding: 50px;
}

.box {
  float: left;
  width: 50px;
  padding: 10px 15px;
  height: 30px;
  position: relative;
  background: #fff;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  filter:drop-shadow(0px 0px 5px black);
}

.box:before,
.box:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  bottom: 0;
  background:radial-gradient(circle at top left, #fff0 72%, #fff 75%);
}

.box:after {
  right: 0;
  top:100%;
  background:radial-gradient(circle at bottom left, #fff0 70%, #fff 75%);
}

.box:before {
  bottom:100%;
 right: 0;
}

<div class="box"></div>

这篇关于从右上角和右下角创建反向边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！