删除三角形下方/上方的小线条

时间:2017-08-10 00:17:09

标签: html css

我正在努力删除本网站三角形下方和上方的那些行:http://bm-translations.de

当您在移动设备上滚动时,您会在多个三角形上看到它们。你知道如何调整代码吗? 我试图调整高度和top:-1px等,但没有什么能帮助删除这些行。

enter image description here

    /* white triangle */
    .dreieckweiss {
        width: 0;
        height: 0;
        border-left: 120px solid transparent;
        border-right: 120px solid transparent;
        border-top: 60px solid white;
        color: white;
        margin: auto auto;
        font-size: 0px;
        line-height: 0px;
        margin-bottom: 30px;
    }

    /* grey triangle */
    .dreieckgrau {
        width: 0;
        height: 0;
        border-left: 120px solid transparent;
        border-right: 120px solid transparent;
        border-top: 60px solid #E8E8E8;
        color: #E8E8E8;
        margin: auto auto;
        font-size: 0px;
        line-height: 0px;
        margin-bottom: 30px;
    }

    .dreiecktransparent {
      position: relative;
      height: 60px;
      width: 100%;
      padding-top: 60px;
      background: white;
      background-clip: content-box;
      overflow: hidden;
      color: white;
    }
    .dreiecktransparent:before,
    .dreiecktransparent:after {
      position: absolute;
      content: '';
      top: 0;
      width: calc(50% );
      height: 60px;
      background: white;
    }
    .dreiecktransparent:before {
      left: 0;
      transform: skew(60deg);
      transform-origin: right bottom;
    }
    .dreiecktransparent:after {
      right: 0;
      transform: skew(-60deg);
      transform-origin: left bottom;
    }

1 个答案:

答案 0 :(得分:0)

在另一个论坛,我得到了答案。我必须将margin-top:-1px;添加到triangels .dreieckweiß.dreiecktransparent的类中。

无论如何,谢谢你看一眼!