主页 / 问题 / 1095396
Accepted
Asen123
Asked:2020-03-16 21:38:49 +0800 CST2020-03-16 21:38:49 +0800 CST

如何在css中制作一个图形

  • 772

如何制作这样的图http://htmlbook.ru/files/images/blog/matrix_1d.png。我会很感激

css

3 个回答

  1. 看到这里一切都详细描述点击

    #trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
    transform: rotate(90deg);
}


    我希望它有帮助

    • 1
  2. Best Answer

    您需要为父级指定一个透视图

    body {
  perspective: 600px;
}

.item {
  width: 200px;
  height: 100px;
  background: red;
  transform: rotateY(60deg);
}
    <div class="item"></div>

    • 1

  3. 使用剪辑路径的示例

    .block {
  width: 150px;
  height: 100px;
  background-color: #000;
  position: relative;
  transition: background-color .3s ease;
}

.block::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background-color: #ccc;
}

.block,
.block::after {
  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0% 100%);
}

.block:hover {
  background-color: #00f;
}
    <div class="block"></div>

    • 0

相关问题