logo标签列表

在CSS中创建菱形形状及其中内容

css
5
我想创建一个菱形背景，这个菱形背景可能包含内容（文本、图片），但我不知道如何实现。 举个例子，我分享了一张截图，在这个例子中，我使用了一个菱形形状的背景图片，但我想用背景颜色来实现。我需要你的帮助。

enter image description here

HTML：-

<section class="elementor-element elementor-element-217588eb our-approach-container elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-top-section" data-id="217588eb" data-element_type="section" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
                        <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                <div class="elementor-element elementor-element-6ef62209 elementor-column elementor-col-100 elementor-top-column" data-id="6ef62209" data-element_type="column">
            <div class="elementor-column-wrap  elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <section class="elementor-element elementor-element-c597ac2 our-approach-container1 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-inner-section" data-id="c597ac2" data-element_type="section">
                        <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                <div class="elementor-element elementor-element-84eef87 img-box elementor-column elementor-col-33 elementor-inner-column" data-id="84eef87" data-element_type="column">
            <div class="elementor-column-wrap  elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div class="elementor-element elementor-element-1b8e55c elementor-widget elementor-widget-image" data-id="1b8e55c" data-element_type="widget" data-widget_type="image.default">
                <div class="elementor-widget-container">
                    <div class="elementor-image">
                                        <img width="394" height="410" src="https://youthbuilddev.wpengine.com/wp-content/uploads/2020/10/our-approach-image.png" class="attachment-large size-large" alt="" srcset="https://youthbuilddev.wpengine.com/wp-content/uploads/2020/10/our-approach-image.png 394w, https://youthbuilddev.wpengine.com/wp-content/uploads/2020/10/our-approach-image-288x300.png 288w, https://youthbuilddev.wpengine.com/wp-content/uploads/2020/10/our-approach-image-24x24.png 24w, https://youthbuilddev.wpengine.com/wp-content/uploads/2020/10/our-approach-image-36x36.png 36w, https://youthbuilddev.wpengine.com/wp-content/uploads/2020/10/our-approach-image-46x48.png 46w" sizes="(max-width: 394px) 100vw, 394px">                                          </div>
                </div>
                </div>
                        </div>
            </div>
        </div>
                <div class="elementor-element elementor-element-23bb737 elementor-column elementor-col-33 elementor-inner-column" data-id="23bb737" data-element_type="column">
            <div class="elementor-column-wrap">
                    <div class="elementor-widget-wrap">
                        </div>
            </div>
        </div>
                <div class="elementor-element elementor-element-432c72f elementor-column elementor-col-33 elementor-inner-column" data-id="432c72f" data-element_type="column">
            <div class="elementor-column-wrap  elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div class="elementor-element elementor-element-ab38d39 elementor-widget elementor-widget-text-editor" data-id="ab38d39" data-element_type="widget" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                    <div class="elementor-text-editor elementor-clearfix"><h2>YouthBuild USA</h2></div>
                </div>
                </div>
                <div class="elementor-element elementor-element-449d755 elementor-widget elementor-widget-text-editor" data-id="449d755" data-element_type="widget" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                    <div class="elementor-text-editor elementor-clearfix"><p>YouthBuild USA has built a robust network of over 230 domestic programs in 46 states and territories. They are sponsored and managed by local community-based nonprofits, community colleges, and public agencies.&nbsp;</p></div>
                </div>
                </div>
                <div class="elementor-element elementor-element-a1373e9 load-more-btn elementor-widget elementor-widget-button" data-id="a1373e9" data-element_type="widget" data-widget_type="button.default">
                <div class="elementor-widget-container">
                    <div class="elementor-button-wrapper">
            <a href="/our-approach/youthbuild-usa/" class="elementor-button-link elementor-button elementor-size-sm" role="button">
                        <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text">Learn More</span>
        </span>
                    </a>
        </div>
                </div>
                </div>
                        </div>
            </div>
        </div>
                        </div>
            </div>
        </section>
                <section class="elementor-element elementor-element-f103ccf our-approach-container2 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-inner-section" data-id="f103ccf" data-element_type="section">
                        <div class="elementor-container elementor-column-gap-default">
                <div class="elementor-row">
                <div class="elementor-element elementor-element-ffe8872 elementor-column elementor-col-33 elementor-inner-column" data-id="ffe8872" data-element_type="column">
            <div class="elementor-column-wrap  elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div class="elementor-element elementor-element-76a408f elementor-widget elementor-widget-text-editor" data-id="76a408f" data-element_type="widget" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                    <div class="elementor-text-editor elementor-clearfix"><h2>YouthBuild International</h2></div>
                </div>
                </div>
                <div class="elementor-element elementor-element-8a43840 elementor-widget elementor-widget-text-editor" data-id="8a43840" data-element_type="widget" data-widget_type="text-editor.default">
                <div class="elementor-widget-container">
                    <div class="elementor-text-editor elementor-clearfix"><p><span style="font-weight: 400;">Through YouthBuild International, the YouthBuild model has been implemented by NGOs, government agencies, international development institutions, and global companies in 17 countries. The model has been adapted for implementation in rural and urban settings located in developing countries, emerging economies, and industrialized nations.</span></p></div>
                </div>
                </div>
                <div class="elementor-element elementor-element-95a9a0d load-more-btn elementor-widget elementor-widget-button" data-id="95a9a0d" data-element_type="widget" data-widget_type="button.default">
                <div class="elementor-widget-container">
                    <div class="elementor-button-wrapper">
            <a href="/our-approach/youthbuild-international/" class="elementor-button-link elementor-button elementor-size-sm" role="button">
                        <span class="elementor-button-content-wrapper">
                        <span class="elementor-button-text">Learn More</span>
        </span>
                    </a>
        </div>
                </div>
                </div>
                        </div>
            </div>
        </div>
                <div class="elementor-element elementor-element-87b2033 elementor-column elementor-col-33 elementor-inner-column" data-id="87b2033" data-element_type="column">
            <div class="elementor-column-wrap">
                    <div class="elementor-widget-wrap">
                        </div>
            </div>
        </div>
                <div class="elementor-element elementor-element-0cf441a img-box elementor-column elementor-col-33 elementor-inner-column" data-id="0cf441a" data-element_type="column">
            <div class="elementor-column-wrap  elementor-element-populated">
                    <div class="elementor-widget-wrap">
                <div class="elementor-element elementor-element-72bd75a elementor-widget elementor-widget-image" data-id="72bd75a" data-element_type="widget" data-widget_type="image.default">
                <div class="elementor-widget-container">
                    <div class="elementor-image">
                                        <img width="394" height="410" src="https://youthbuilddev.wpengine.com/wp-content/uploads/2020/07/img10.png" class="attachment-large size-large" alt="" srcset="https://youthbuilddev.wpengine.com/wp-content/uploads/2020/07/img10.png 394w, https://youthbuilddev.wpengine.com/wp-content/uploads/2020/07/img10-288x300.png 288w" sizes="(max-width: 394px) 100vw, 394px">                                         </div>
                </div>
                </div>
                        </div>
            </div>
        </div>
                        </div>
            </div>
        </section>
                        </div>
            </div>
        </div>
                        </div>
            </div>
        </section>

CSS：-

 .our-approach-container {
  margin: 140px 0px;
    padding: 125px 0px 120px 0px;
    background: url(../images/approach-hexa-bg.png) center no-repeat;
    background-size: cover;
    color: #ffffff;
    height: 1610px;
}
.our-approach-container h2{
    color: #ffffff;
}
.our-approach-container p{
    color: #ffffff;
}
.our-approach-container p{margin: 40px 0px 40px 0px;
color: #ffffff;}
.our-approach-container .load-more-btn {
    background: #E65400;
    margin-top: 40px;
    position: relative;
    width: 190px;
    max-width: 100%;
    text-align: center;
    line-height: 16px;
    font-weight: 700;
    color: #ffffff;
    padding: 26px 5px 28px 5px ;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.7s;
    transition-duration: 0.7s;
}
.our-approach-container .floatright h2 {
}
.approach-inter h2 {
    padding-top: 1065px;
}
.our-approach-container .floatright p,.our-approach-container .floatright a {
    margin-left: 80px;
}
.our-approach-container .floatright .load-more-btn{
    margin-left: 80px;
}
.our-approach-container .floatright a {margin-left: 0px;}
.our-approach-container{height:2150px;}
整个图形是一个菱形吗？还是只有顶部的三角形？我只是根据您分享的图片来举例，所以可能不是您想要的......如果您仍然需要帮助，请让我知道您是想要整个菱形还是只要顶部的部分，我将编辑我的答案以提供您所需的答案。 - Jacob Hornbeck
2个回答
3

制作一个尖顶元素

正如你在评论中提到的，只使用transform: rotate(-45deg);会使内容旋转。我会使用::before或::after来制作三角形，然后使用border技巧在上方制作三角形。

这个codepen演示了我的方法。
重要的部分是从第17行开始的CSS（在“view-compiled CSS”后）:

.example::after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: 0;
    height: 0;
    border: solid 385px transparent;
    border-bottom: solid 200px #00325F;
    transform: translate(0, -100%);
}

制作带内容的菱形元素

为了使元素显示整个菱形，您可以拥有主要元素和一个包含内容的section（用于保留内容），然后使用::after来显示菱形而无需担心内容。

我编写了以下codepen，展示了我所描述的内容。

它使得容器设置display: flex;变得容易，然后对justify-和align-items: center;进行设置，这样当我将::after和section设置为position: absolute;时，一切都会基于容器的宽度和高度居中。因此，当您想要调整元素居中的方式时，只需要更改容器元素的宽度和高度即可。

附加评论

这不是解决方案的一部分，但是查看您的HTML，如果您不需要所有这些嵌套元素，建议仅缩小到所需内容。

我的编写很快，只是用作示例，但它看起来与您在图片中看到的内容非常接近。

1
由于已经超过1年，我已经完成了那个项目并不再继续工作，但是你付出了努力，所以我会点赞并接受你的答案。我想知道，如果我需要在上下或每个方向（4个方向[左、右、上、下]）上有菱形形状，我该如何实现？这只能通过before或after实现吗？ - Ali Bhutta
1
@AliBhutta，我刚刚编辑了我的答案，使其能够与完整的菱形一起使用。关于你第二个问题，我认为在我的初始示例中我们不能仅使用::before和::after，因为::after和::before会覆盖内容，这就是为什么在我的第二个示例中，我有一个容器元素，然后在其中放置了该部分，以允许内容显示在菱形上方。 - Jacob Hornbeck
很酷，谢谢。 - Ali Bhutta
0
1
如果我按照你建议的做，那么图像和内容也会被转换，这不是我想要的。 - Ali Bhutta
1
@AliBhutta 使用 ::before 构建所需的形状，然后使用 transform: rotate(-45deg);。 - Jacob Hornbeck
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接