Menu
I want to create a background as a Diamond shape, this diamond shape may have content inside it(text, images) but I don't know how to do this. As an example, I'm sharing a screen shot, in this example I'm using a background image of a diamond shape but I want to achieve this with a background color. I need your help.
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="{"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;}
756
As you mentioned in your comment to Troy, just transform: rotate(-45deg); will rotate the content as well. The way that I would do it, is by using a ::before or ::after, and then use the border trick to make the triangle on top.
This codepen, is how I would do it.
The important part in it, is the CSS that starts on line 17 (after you "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%);
}
For making the element show an entire diamond, you could have your main element, with a section (that holds the content), and then use a ::after to display the diamond without having to worry about the content.
I wrote the following codepen to show what I described.
It makes it easy to have the container, set the display: flex; and then justify- and align- items: center; so that when I set the ::after and the section to position: absolute; everything will be centered based on the containers with and height. So when you want to adjust the way the element is centered, you just need to change the width and height of the container element.
This isn't part of the solution, but looking at your HTML, if you don't need all those nested elements, I would suggest narrowing it down only to what you need.
I did mine really quick, just to use as an example, but it looks pretty close to what you have in the picture.
62
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
