css - 用 css 和 vue 形成图形

问题描述

我正在尝试在我的网站上创建这个图，我正在使用 CSS 和 Vue，但到目前为止我还没有实现这个目标，我对此真的很陌生

我的目标：

到目前为止我所拥有的：

我还没有真正让它看起来像第一张图片，任何关于如何做到的建议，因为我对此真的很陌生

<div id="paralelogramored" class="forma"></div>
  <div id="paralelogramowhite" class="forma">
    <a Class="">Iniciar Sesion</a>
    <img style="float:left;" src="./assets/scss/images/loginLogo.png" class="imgLogin"/>
  </div>

我的 CSS

        .imgLogin{
          width: 20px;
        }

        .forma{
          display: inline-block;
          margin: 16px;
        }

        #paralelogramored {
           width: 150px; 
           height: 50px; 
           background: red;
           -webkit-transform: skew(-30deg); 
           -moz-transform: skew(-20deg); 
           -o-transform: skew(-20deg); 
           padding-top: 0px;
        }
        #paralelogramowhite {
           width: 150px; 
           height: 50px; 
           background: white;
           -webkit-transform: skew(-30deg); 
           -moz-transform: skew(-20deg); 
           -o-transform: skew(-20deg); 
           padding-top: 0px;
        }

标签： cssvue.js

您可以通过使用 psuedo 元素来实现这一点:before。我附上了一个简单的例子，说明它可能是什么样子。

body {
  background: url(https://www.topgear.com/sites/default/files/styles/16x9_1280w/public/images/news-article/2018/07/979c566babe3ae625a9ad7350c019677/a187611_large.jpg?itok=laveSilF) no-repeat;
  background-size: cover;
  margin: 0;
}

#banner {
  width: 380px;
  height: 55px;
  position: relative;
  overflow: visible;
  margin: 0 0 0 auto;
  background: #fff;
}

#banner:before {
  content: '';
  display: block;
  z-index: 1;
  position: absolute;
  top: 0;
  left: -30px;
  background: red;
  transform: skew(-45deg);
  height: 100%;
  width: 30%;
}


#banner .content {
  margin-left: 30%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  position: relative;
  background: transparent;
}

<div id="banner">
   <div class="content">
     Content is positioned here
   </div>
</div>

css - 用 css 和 vue 形成图形

问题描述

解决方案

推荐阅读