弧形侧边栏

基于angular 10版本

css 设计

.bodyTest{

    background-color:rgb(23,32, 42);

    margin: 0;

    padding: 0;

    height: 700px;;

    position: relative;

    overflow-x:hidden;

    overflow-y:hidden;

}

.box {

    position: relative;

    left:-50px;

    width: 100px;

    height: 400px;

    text-align: center;

    writing-mode: tb-rl;

    color: #fff;

    background-color:rgb(113,113, 113);

    display: inline-block;

    border-radius: 0 50% 50% 0;

  }

  .box-right{

    position: relative;

    width: 100px;

    height: 400px;

    right: -50px;

    text-align: center;

    writing-mode: vertical-rl;

    color: #fff;

    background-color:rgb(113,113, 113);

    float:right;

    border-radius: 0 50% 50% 0; 

    transform: rotate(-180deg);

  }

  .fontTest{

   flex-grow: 1;

    word-wrap: normal;

    transform: rotate(-180deg);

  }

  

html页面

<div class="bodyTest">

  <div class='box'>

    <p>W &nbsp; A &nbsp;T&nbsp; E &nbsp;R &nbsp;&nbsp;&nbsp;&nbsp; S&nbsp; I&nbsp; D&nbsp; E </p>

  </div>

  <div class='box-right'>

    <p class="fontTest">L &nbsp; A &nbsp;N&nbsp; D&nbsp;&nbsp;&nbsp;&nbsp; S&nbsp; I&nbsp; D&nbsp; E </p>

  </div>

</div>