Question

我正在尝试建立一个网站。我是前端的新手，所以有时会有这样的麻烦。

目的是制作一个自定义导航栏，这是一个正确的梯形。我试图通过<svg>和<polygon>进行处理，将一些内容放在<foreignObject>内，但在其中定位很糟糕且<svg>无法调整高度百分比。

有没有办法制作类似于照片中栏的东西，或者你能用svg帮我吗？真的需要你的帮助。提前谢谢。

Answer 1

.parallelogram {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 150px;
  height: 100px;
  bottom: 0;
  margin: -149px;
  padding: 15% 24% 43% 14%;
  border: none;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(0,0,0,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #00354D;
  -webkit-transform:    skewX(-20deg);
  transform:    skewX(-20deg);
}

Answer 2

梯形可以由高度为零（高度为0px），宽度大于零的边界元素和边框组成，除了一边外，它是透明的。

HTML：

<div class="trapezoid"></div>

CSS：

.trapezoid {
    width: 50px;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid black;
}

并且稍加定位，你可以在上面添加一些文字：

.menu {
  position: relative;
}
.background {
  position: absolute;
  top: 0;
  width: 100px;
  height: 0;
  border-right: 60px solid transparent;
  border-top: 200px solid #346;
}
.items {
  position: absolute;
  top: 0;
  color: #fff;
  padding: 10px;
}

<div class="menu">
  <div class="background"></div>
  <div class="items">Item One<br>Item Two<br>Item Three</div>
</div>

麻烦制作自定义导航栏

2 个答案: