在CSS中创建菱形形状及其内部内容
我想创建一个钻石形状的背景，这个钻石形状里面可能有内容（文本，图像），但我不知道怎么做。 举个例子，我分享了一个屏幕截图，在这个例子中，我使用了一个菱形的背景图像，但我想用背景色来实现这一点。我需要你的帮助 HTML:-在CSS中创建菱形形状及其内部内容,css,Css,我想创建一个钻石形状的背景，这个钻石形状里面可能有内容（文本，图像），但我不知道怎么做。 举个例子，我分享了一个屏幕截图，在这个例子中，我使用了一个菱形的背景图像，但我想用背景色来实现这一点。我需要你的帮助 HTML:- <section class="elementor-element elementor-element-217588eb our-approach-container elementor-section-boxed elementor-section-heig
<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="{"background_background":"classic"}">
<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. </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;}
transform: rotate(-45deg);