主页 / 问题 / 964440
Accepted
bad code
Asked:2020-04-02 16:30:23 +0000 UTC2020-04-02 16:30:23 +0000 UTC

是否可以在css中使不同方向的边框弯曲？

  • 772

在此处输入图像描述

左边弯曲，右边缩回，用css能做到吗？

css

2 个回答

  1. Best Answer

    作为一个选项..

    将这些弯曲零件用作“辅助”块 ( .left, .right) 的背景。

    body {
  background: red;
  margin: 0;
}

.block {
  display: block;
  min-width: ;
  width: 50%;
  height: 100vh;
  position: fixed;
  left: 0; top: 0; bottom: 0;
}

.block::after {
  content: '';
  display: block;
  clear: both;
}

.left, .content, .right {
  display: inline-block;
  height: 100vh;
  float: left;
}

.left, .right {
  width: 50px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
}

.content {
  width: calc(100% - 100px);
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}

.left {
  background-image: url('https://isstatic.askoverflow.dev/q7pRP.png');
}

.right {
  background-image: url('https://isstatic.askoverflow.dev/Pzvnn.png');
}
    <div class="block">
  <div class="left"></div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper, turpis vitae semper malesuada, mauris nisi interdum neque, ut ultrices lectus quam quis nibh.
  </div>
  <div class="right"></div>
</div>

    • 2

  2. 可以用border-radius和完成radial-gradien。

    或多或少是这样的：

    .wapper {
  background-color: red;
  padding: 40px;
}

.fig {
  width: 400px;
  height: 200px;
  background: radial-gradient(circle 1px at 150% 50%, transparent, transparent 225px, white 0);
  background-size: 100% 200px;
  background-position: 0 0, 100% 0;
  background-repeat: no-repeat;
  border-radius: 45px/100px 0 0 50%;
}
    <div class='wapper'>
  <div class='fig'>

  </div>
</div>

    • 1

相关问题