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

问题描述

使用 CSS，我试图实现以下响应屏幕大小调整的效果(用于响应式设计).具体来说，我希望三角形随着浏览器窗口变小而成比例地变小.我将其模拟为 PNG(它不是 HTML/CSS):

到目前为止，我使用此代码作为基础，其中 2 个 div 堆叠在一起:

CSS:

.pinbox {背景颜色:#FF8290；宽度:100%；高度:100px；}.greenbox {背景颜色:#85D782；宽度:100%；高度:100px；}

HTML:

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

解决方案

具有 PURE CSS 且没有媒体查询的响应三角形.

请参阅这篇 codeitdown 文章

小提琴

调整窗口大小并观察三角形响应调整大小！

标记

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

CSS

.top{背景:粉红色；高度:100px；位置:相对；}.底部{背景:浅绿色；高度:100px；}.三角形向下{宽度:2.5%；高度:0；填充左:2.5%；填充顶部:2.5%；溢出:隐藏；位置:绝对；左:0；右:0；/* 使箭头居中 */保证金:自动；/* 使箭头居中 */顶部:100px；/* 顶部高度 */z-索引:1；}.triangle-down:before {内容: '';显示:块；宽度:0；高度:0；左边距:-50px；边距顶部:-50px;左边框:50px 实心透明；border-right: 50px 实心透明；边框顶部:50px 纯粉色；}

它到底是怎么工作的?

嗯，首先我们需要决定两件事:

1) 三角形的宽高比.在上面的例子中(为了简单起见)，我使用了 2:1 的比例.

2) 我们希望三角形占据多少容器/视口宽度.在上面的示例中，我使用了视口宽度的 5% 的三角形:(width 2.5% + padding-left:2.5%;)

现在根据以下规则设置其他属性/比例:(来自上面的文章)

<块引用>

1) (padding-left + width)/padding-top = (border-left +边框右)/边框顶部 = 底部/高度

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

3) margin-top = -border-top

4) width = padding-left

自定义响应三角形:

假设您想要一个比例为 3:1 的三角形，并让它占据宽度的 6%..

没问题！

另一把小提琴(这个实际上看起来更像图片)

将 CSS 修改为:

.triangle-down{宽度:3%；高度:0；填充左:3％；填充顶部:2%；溢出:隐藏；位置:绝对；左:0；右:0；保证金:自动；顶部:100px；z-索引:1；}.triangle-down:before {内容: '';显示:块；宽度:0；高度:0；左边距:-50px；边距顶部:-33px;左边框:50px 实心透明；border-right: 50px 实心透明；边框顶部:33px 纯粉色；}

享受吧！

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