8

这是我的 CSS 三角形。当父容器（具有高度百分比设置）调整大小时，三角形也应该调整大小。

必须如何更改以下定义才能使其起作用？

如果它不适用于常见的 CSS，我也对 CSS3 开放。

.segmentTriangle{
    width: 0px;
    height: 0px;
    position: relative;
    left: 0;
    top: 0;
    border-style: solid;
    border-width: 20px 20px 0 0;
    border-color: #000 transparent transparent transparent;
}

更新

这是我的布局的一部分：

<div style="height: 100%;">
    <div style="float: left; height: 100%;" id="triangleWrapper">
        <div style="height: 100%;" class="segmentTriangle"></div>
    </div>
    <div class="fontsize" data-bind="text: replies, style: { height: heightFormatted, background: background }" style="width: 90%;padding-right:20px; height: 100%; text-align: right; float: left;"></div>
</div>
4

4 回答 4

14

你需要改变生成三角形的方式，正如 Alien 先生所说的边界不是流动的。

CSS 将是：

.triangle {
    width: 40%;
    height: 40%;
    left: 0px;
    top: 0px;
    background: linear-gradient(to right bottom, black 50%, transparent 50%)
}

演示

您将三角形尺寸设置为最适合您的父元素的百分比，然后将三角形的对角线设为黑色。

更改了演示，以便基本元素响应：

演示2

包含您的 html 的新演示。

演示3

我已将 CSS 添加到最低限度以使其工作：为 body 和 html 添加 100% 的高度，为包装器添加宽度。否则，这是您的布局，因此应该可以。

于 2013-07-30T08:49:09.737 回答
11

我的解决方案：
http

://codepen.io/malyw/pen/mhwHo/描述：
我需要箭头来标记活动的侧边栏菜单项。
当我在其中包含多行文本时，箭头被破坏了。
所以 mu 解决方案是：
使用具有线性渐变的:after和:before元素来提供具有相同宽度的拉伸箭头：代码：

&:before { 
  top: 0px; background: linear-gradient(to right top, $color 50%, transparent 50%);
}

&:after {
  top: 50%; background: linear-gradient(to right bottom, $color 50%, transparent 50%);
}

感谢@vals 的想法。

于 2014-08-01T15:50:05.380 回答
6

这个小提琴只使用 CSS 和一个元素来实现响应式 CSS 三角形。它显示了向上、向下、向左和向右的三角形，而你的三角形是左上角的。响应式向下三角形可以很容易地修改来实现它：

.triangle-top-left {
    width: 0;
    height: 0;
    padding-bottom: 25%;
    padding-left: 25%;
    overflow: hidden;
}
.triangle-top-left:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left: -500px;

    border-bottom: 500px solid transparent;
    border-left: 500px solid #4679BD;
}

有关用于响应式三角形的逻辑的解释，请参阅我关于纯 CSS 响应式三角形的文章。

于 2013-09-10T18:10:47.607 回答
0

避免锯齿线的非梯度解决方案（小提琴）

我一直在寻找与@Serg Hospodarets 答案完全相同的东西，但我意识到渐变正在创建一条锯齿线，可能是浏览器的渲染问题。所以经过一番搜索和摆弄后，我做了这个。

摘要： 我使用Johan Rönnblom在这里回答的间隔技术以 1:1 的比例计算相对于高度的宽度，然后我在 div 的边缘添加 2 个框，其父元素高度的 50% 和宽度等于 50%创建完美的正方形，然后我将子元素旋转 45 度，创建对角线切割。

下面是完整的代码：

HTML

<div class="box">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro, esse assumenda corporis nemo perspiciatis dolorem vero consectetur asperiores necessitatibus, ea, saepe fugit alias, voluptatum blanditiis quia! Consequatur dolorem, consectetur adipisci.
  <div class="u-prop">
    <div class="wrap">
      <img class="spacer" width="2048" height="2048" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
      <div class="proportional"></div>
    </div>
  </div>

  <div class="u-prop is--bot">
    <div class="wrap">
      <img class="spacer" width="2048" height="2048" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
      <div class="proportional"></div>
    </div>
  </div>

</div>

SCSS：

body {
  padding: 10px;
}

* {
  box-sizing: border-box;
}

.box {
  padding: 10px;
  width: 500px;
  position: relative;
  background: #eee;
  &:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #000;
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border-right: solid -0px transparent;
  }
}

.u-prop {
  position: absolute;
  height: 50%;
  width: 100%;
  top: 0;
  left: 100%;
  &.is--bot {
    top: 50%;
    .proportional {
      transform: rotate(-45deg);
      transform-origin: bottom left;
      &:before {
        border-bottom: 1px solid #000;
        border-top: none;
      }
    }
  }
  .spacer {
    width: auto;
    max-height: 100%;
    visibility: hidden;
  }
  .proportional {
    position: absolute;
    top: 0;
    left: 0px;
    width: 150%;
    height: 0;
    padding-bottom: 100%;
    background: #eee;
    transform: rotate(45deg);
    transform-origin: top left;
    &:before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      border-top: 1px solid #000;
      position: absolute;
      top: 0;
      left: 0;
      box-sizing: border-box;
    }
  }
  .wrap {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    max-width: 100%;
    overflow: hidden;
  }
}
于 2018-03-27T09:09:11.120 回答