demo3

Question

这是我的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>

Answer 1

你需要改变生成三角形的方式，因为Alien先生说边框不流畅。

CSS将是：

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

demo

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

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

demo2

包含您的HTML的新演示。

demo3

我已经将CSS添加到最低限度以使其正常工作：将100％高度添加到body＆amp; html，为包装器添加了宽度。否则，这是你的布局，所以这应该有效。

Answer 2

我的解决方案：
的 http://codepen.io/malyw/pen/mhwHo/

说明
我需要箭头来标记活动的侧边栏菜单项当我在其中有多行文字时，箭头被打破了所以mu解决方案是：
使用：后：元素线性渐变来提供宽度相同的拉伸箭头：

的代码：

&: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的想法。

Answer 3

This fiddle使用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;
}

有关用于响应三角形的逻辑的说明，请参阅Pure CSS responsive triangles上的文章。

Answer 4

非梯度解决方案，以避免锯齿线（Fiddle）

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

<强>要点：我使用约翰Rönnblom的spacer technique回答here以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;
  }
}

当调整其父div的大小时，使css三角形/箭头增长

4 个答案:

demo3