我如何让我的三角形响应？答案

【问题标题】：How do i turn my triangle responsive?我如何让我的三角形响应？
【发布时间】：2014-03-21 23:25:21
【问题描述】：

我试图让我的三角形响应，因为它只适用于台式电脑，我该怎么做？

我这里有一个代码，我想把我的 div 变成响应式 div，适用于手机、平板电脑...

三角码：

*{
background-color: black;
    padding:0;
    margin:0 auto;
}


.triangle-down {
width: 0px;
height: 0px;
border-style: solid;
border-width: 642px 187.5px 0 187.5px;
border-color: #007bff transparent transparent transparent;
}

html代码

<div class="triangle-down"></div>

【问题讨论】：

如果您希望边框正确缩放，测量值需要以百分比表示。不幸的是，边框宽度不适用于百分比。您可以使用媒体查询和断点，也可以使用线性渐变。见此链接：stackoverflow.com/questions/12380759/…

标签： css

【解决方案1】：

如果你不介意使用背景辐射，这可以作为身体背景的替代方案：。 http://codepen.io/gc-nomade/pen/mBjtC

body {
  background:
    linear-gradient(
      to top left,
      black,
      black 50%,
      rgba(0,0,0,0) 50%,
    rgba(0,0,0,0)) top  center no-repeat,
    linear-gradient(
      to top right, 
      black, 
      black 50%, 
      #007bff 50%, 
      #007bff     )  top center no-repeat;
    background-size:40% 200%;/* set your own values and units here */
    background-color: black;
    padding:0;
    margin:0 auto;
    min-height:100%;
}
html {
    height:100%;
}

【讨论】：

【解决方案2】：

您可能应该使用百分比而不是像素，您可以通过将像素大小除以上下文来计算出等效值，上下文通常是您尚未声明的主体容器的大小，但通常为 1000 像素以方便使用。要使用 ems，它会除以基本字体大小，或者你可以使用转换器，如果你没有声明基本字体大小，它通常是 16px http://pxtoem.com/

【讨论】：