主页 / 问题 / 642684
Accepted
Oleg Ovcharenko
Asked:2020-03-22 16:06:25 +0000 UTC2020-03-22 16:06:25 +0000 UTC

如何制作带斜边的帽子？

  • 772

如何在不使用图片的情况下实现块的斜边。红线显示容器块的限制。

例子：

例子

вёрстка

1 个回答

  1. Best Answer

    #outer,
#block {
  color: #fff;
  height: 100px;
  width: 300px;
  margin-left: 50px;
}
#content {
  transform: skewX(30deg);
}
#block {
  background: blue;
}
#outer {
  transform: skewX(-30deg);
}
    <div id="outer">
  <div id="block">
    <div id="content">
    </div>
  </div>
</div>

    • 2

相关问题