纯css实现内凹圆角-书签笔记本模式

写在之前
其实这篇博客为何记录,是因为在前端技术微信群中,有群友问到此类内凹圆角问题,自然是想了解下他遇到的难点。
纯css实现内凹圆角-书签笔记本模式_第1张图片

实现效果如下

纯css实现内凹圆角-书签笔记本模式_第2张图片

代码实现如下
由于这里有边框的存在,这就导致,我们的圆角参数的设置,得覆盖到上方边框进行,遮挡,否则就达不到实际效果,具体代码请参看如下

<html>

<head>
  <meta charset="utf-8" />
  <title>border-raduis 实现内凹圆角title>
  <style type="text/css">
       :root {
      box-sizing: border-box;
      /* 圆角半径 */
      --border-raduis-size: 32px;
      /* 边框宽度 */
      --border-width: 8px;
      /* 我们的相连接部分的圆角进行衔接,需要对边框进行覆盖,这里和边框宽度为相反数 */
      --offset-width: -8px;
      /* 左边框的颜色 */
      --left-box-border-color: #fdc3c5;
      /* 右边框的颜色 */
      --right-box-border-color: #fe696c;
    }

    *,
    *::after,
    *::before {
      box-sizing: inherit;
    }

    .container {
      display: flex;
      justify-content: flex-start;
      margin-top: 100px;
      margin-left: 100px;
    }

    .wrap {
      height: 450px;
      position: relative;
    }

    .wrap1 {
      width: 200px;
      background-image: #fef2f4;
      border-radius: var(--border-raduis-size) 0 0 var(--border-raduis-size);
      border: var(--border-width) solid var(--left-box-border-color);
      border-right: 0;
    }

    .wrap2 {
      width: 250px;
      background-color: #ff8a90;
      border-radius: 0 var(--border-raduis-size) var(--border-raduis-size) 0;
      border: var(--border-width) solid var(--right-box-border-color);
      border-left: 0;
    }

    .wrap_left_top,
    .wrap_right_top,
    .wrap_left_bottom,
    .wrap_right_bottom {
      position: absolute;
      width: var(--border-raduis-size);
      height: var(--border-raduis-size);
      border: var(--border-width) solid #7367F0;
      z-index: 1;
      background: #fff;
    }

    .wrap_left_top {
      top: var(--offset-width);
      left: 0;
      border-radius: 0 0 var(--border-raduis-size) 0;
      border: var(--border-width) solid var(--right-box-border-color);
      border-top: 0;
      border-left: 0;
    }

    .wrap_right_top {
      top: var(--offset-width);
      right: 0;
      border-radius: 0 0 0 var(--border-raduis-size);
      border: var(--border-width) solid var(--left-box-border-color);
      border-top: 0;
      border-right: 0;
    }

    .wrap_left_bottom {
      left: 0;
      bottom: var(--offset-width);
      border-radius: 0 var(--border-raduis-size) 0 0;
      border: var(--border-width) solid var(--right-box-border-color);
      border-bottom: 0;
      border-left: 0;

    }

    .wrap_right_bottom {
      right: 0;
      bottom: var(--offset-width);
      border-radius: var(--border-raduis-size) 0 0 0;
      border: var(--border-width) solid var(--left-box-border-color);
      border-bottom: 0;
      border-right: 0;

    }
  style>
head>

<body>

  <div class="container">
    <div class="wrap wrap1">
      <div class="wrap_right_top">div>
      <div class="wrap_right_bottom">div>
    div>
    <div class="wrap wrap2">
      <div class="wrap_left_top">div>
      <div class="wrap_left_bottom">div>
    div>
  div>
 

body>

html>

你可能感兴趣的:(css,css3,html)