水平居中div底部的小三角形，并按比例调整大小 [英] Horizontally center small triangle at bottom of div and resize responsively and proportionately

问题描述

使用CSS我试图完成以下效果响应屏幕调整大小（响应设计）。具体来说，我想让三角形随着浏览器窗口变小而成比例地减小。我已经嘲笑为一个PNG（它不是HTML / CSS）：

到目前为止，我使用这个代码作为基础，2 divs堆叠在一起：

CSS：

  .pinkbox {
 background-color：＃FF8290; 
 width：100％; 
 height：100px; 
} 
 
 .greenbox {
 background-color：＃85D782; 
 width：100％; 
 height：100px; 
} 
  

HTML： b

 < div class =pinkbox>< / div> 
< div class =greenbox>< / div> 
  

解决方案

响应式三角形与PURE CSS并且没有媒体查询。 / h2>

请参阅此 codeitdown文章

p>

FIDDLE > / h2>

 < div class =top> 
< div class =triangle-down>< / div> 
< / div> 
< div class =bottom>< / div> 
  

CSS

  .top 
 {
 background：pink; 
 height：100px; 
 position：relative; 
} 
 
 .bottom 
 {
 background：lightGreen; 
 height：100px; 
} 
 .triangle-down {
 width：2.5％; 
 height：0; 
 padding-left：2.5％; 
 padding-top：2.5％; 
 overflow：hidden; 
 position：absolute; 
 left：0; right：0; / * center the arrow * / 
 margin：auto; / * center the arrow * / 
 top：100px; / *顶部高度* / 
 z-index：1; 
} 
 .triangle-down：before {
 content：''; 
 display：block; 
 width：0; 
 height：0; 
 margin-left：-50px; 
 margin-top：-50px; 
 
 border-left：50px solid transparent; 
 border-right：50px solid transparent; 
 border-top：50px solid pink; 
} 
  

它是如何工作的？

好吧，首先我们需要决定两件事：

1）三角形的宽/高比。在上面的例子中（为了简单起见）我使用了2：1的比率。

2）我们想要三角形占用多少容器/视口宽度。在上面的例子中，我使用了视口宽度的5％的三角形：（width 2.5％+ padding-left：2.5％;）

现在设置其他属性/比例根据以下规则：

1）（padding-left + width）/ padding-top = border-left +
border-right）/ border-top = base / height

2）margin-left = -border-left = -border-right

3）margin-top = -border-top

4）width = padding-left

自定义响应三角形：

假设你想要一个比率为3的三角形： 1，并占用宽度的6％。

没问题！

其他FIDDLE （此图片实际上看起来更像图片）

将CSS修改为：

  .triangle-down {
 width ：3％; 
 height：0; 
 padding-left：3％; 
 padding-top：2％; 
 overflow：hidden; 
 position：absolute; 
 left：0; right：0; 
 margin：auto; 
 top：100px; 
 z-index：1; 
} 
 .triangle-down：before {
 content：''; 
 display：block; 
 width：0; 
 height：0; 
 margin-left：-50px; 
 margin-top：-33px; 
 
 border-left：50px solid transparent; 
 border-right：50px solid transparent; 
 border-top：33px solid pink; 
} 
  

享受！

With CSS I am trying to accomplish the following effect that responds to screen resizing (for responsive design). Specifically I want the triangle to get proportionately smaller as the browser window gets smaller. I have mocked this up as a PNG (It's not HTML/CSS):

So far I am using this code as a base, with 2 divs stack on top of one another:

CSS:

.pinkbox {
    background-color: #FF8290;
    width: 100%;
    height: 100px;
}

.greenbox {
    background-color: #85D782;
    width: 100%;
    height: 100px;
}

HTML:

<div class="pinkbox"></div>
<div class="greenbox"></div>

解决方案

Responsive triangles with PURE CSS and without media queries.

See this codeitdown article

FIDDLE

Resize the window and watch the triangle resize responsively !

Markup

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

CSS

.top
{
    background: pink;
    height: 100px;
    position: relative;
}

.bottom
{
    background: lightGreen;
    height: 100px;
}
.triangle-down{
    width: 2.5%;
    height: 0;
    padding-left:2.5%;
    padding-top: 2.5%;
    overflow: hidden;
    position: absolute;
    left:0;right:0;  /* center the arrow */
    margin:auto;  /* center the arrow */
    top: 100px; /* height of top section */
    z-index:1;
}
.triangle-down:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left:-50px;
    margin-top:-50px;

    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 50px solid pink;
}

How the heck does it work?

Well, firstly we need to decide two things:

1) The width/height ratio of the triangle. In the above example (and for simplicity) I used a ratio of 2:1.

2) How much of the container/viewport width we want our triangle to take up. In the above example I used a triangle of 5% of the viewport width: (width 2.5% + padding-left:2.5%;)

Now set up the other properties /proportions according to the following rules: (from above article)

1) (padding-left + width)/padding-top = (border-left + border-right)/border-top = base/height

2) margin-left = -border-left = -border-right

3) margin-top = -border-top

4) width = padding-left

Customizing the responsive triangle:

Let's say you wanted a triangle of ratio 3:1 and for it to take up 6% of the width..

No problem!

ANOTHER FIDDLE (This one actually looks more like the picture)

Modify CSS to this:

.triangle-down{
    width: 3%;
    height: 0;
    padding-left:3%;
    padding-top: 2%;
    overflow: hidden;
    position: absolute;
    left:0;right:0;
    margin:auto;
    top: 100px;
    z-index:1;
}
.triangle-down:before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    margin-left:-50px;
    margin-top:-33px;

    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 33px solid pink;
}

Enjoy!

这篇关于水平居中div底部的小三角形，并按比例调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！