製作一個css三角形/箭頭時，其父div被調整大小

這是我的css三角形。當父容器（其高度百分比設置）被調整大小時，三角形也應調整大小。製作一個css三角形/箭頭時，其父div被調整大小

如何改變下面的定義，這可以工作？

如果它不能與普通的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; 
}

UPDATE

這是我的佈局的一部分：

<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>

來源

2013-07-30 Elisabeth

您需要更改生成三角形的方式，爲外來先生說邊框不是流體。

的CSS將是：

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

demo

您設置的三角形尺寸最適合你，那你就做對角線三角形的黑色母的百分比。

更改演示，使基本元素響應：

demo2

新的演示，包括你的HTML。

我添加CSS到最低限度，使其工作：增加了100％的高度，以身體& HTML，增加寬度包裝。否則，這是你的佈局，所以這應該工作。

來源

2013-07-30 08:49:09 vals

你的小提琴不起作用。當我調整窗口的大小時，沒有任何三角形調整大小。 – Elisabeth

@Elisa我最初的小提琴演示了三角形適應不同的父母大小，這是你原來的要求;而不是父母的迴應。添加了基本元素響應的演示。 – vals

我讀過使用箭頭邊框方法不能用百分比設置寬度和高度。爲什麼它適合你？我不能在父級上使用絕對位置，我的佈局非常不同。 – Elisabeth

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文章邏輯的解釋。

來源

2013-09-10 18:10:47 JoseV

任何人都可以使用漸變來實現 - @JoseV使用允許IE8支持的僞元素來完成它。哇。 – Adam

我喜歡這個解決方案 – kernel

我的解決辦法：
http://codepen.io/malyw/pen/mhwHo/

說明：
我需要的箭頭標記活躍的工具欄菜單項。
當我在他們的多行文本，箭頭被打破。
所以畝的解決方案是：
使用：和後：前用線性梯度元件，以提供具有相同的寬度拉伸箭頭：

代碼：

&: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-01 15:50:05

我喜歡它，即使它不支持IE <10！下面是解決方案的一個擴展分支，顯示頂部，右側，底部和左側點http://codepen.io/henry/pen/raLOvd – henry

製作一個css三角形/箭頭時，其父div被調整大小

回答

相關問題