zoukankan      html  css  js  c++  java
  • 弧形侧边栏

    基于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;
         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;
         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>
  • 相关阅读:
    从yield关键字看IEnumerable和Collection的区别
    弹出框Fancybox使用详解
    几个不错的JQuery UI框架
    解决 IE6 position:fixed 固定定位问题
    autocomplete 应用(搜索提示框)
    HTML5 基础
    Cookie原理
    escape()、encodeURI()、encodeURIComponent()区别详解
    顶回Top
    移植mavlink协议到STM32详细教程
  • 原文地址:https://www.cnblogs.com/kukai/p/13433544.html
Copyright © 2011-2022 走看看