How to use the same background for an "X" element with css and html?

Asked

Viewed 40 times

1

I created an element in the form of an "X" where at each end I want to use the same background. The background will only appear in the areas in red. I’ve tried using background-clip but I couldn’t and I don’t know if it’s the right way. Here’s an image of how you’d like it and html and css where I left off. inserir a descrição da imagem aqui

HTML and CSS: https://jsfiddle.net/wes_bp/58ozu6kq/

link code

* {
    box-sizing: border-box;
    font-family: 'Josefin Sans', sans-serif;
    padding: 0;
    margin: 0;
}

.shape-group{
    height: 100vh;
    width: 100vw;
}

ul,
li {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section-be-four ul.x-shape{
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    padding: 0;
    width: 800px;
    height: 800px;
    background: url(/assets/img/about1.jpg);
}

.section-be-four li{
    position: absolute;
    width: 311px;
    height: 411px;
    background: blue;
    transform: rotate(-45deg);
    transition: .5s;
}

.section-be-four .shape-1{
    top: 0;
    left: 0;
}

.section-be-four .shape-1::before{
    content: "";
}

.section-be-four .shape-2{
    top: 0;
    left: 63%;
    transform: rotate(45deg);
}
.section-be-four .shape-3{
    background: yellow;
    transform: rotate(45deg);
    height: 311px;
    top: 38.5%;
    left: 31.5%;
}
.section-be-four .shape-4{
    top: 63%;
    transform: rotate(45deg);
}
.section-be-four .shape-5{
    top: 63%;
    left: 63%;
}
<section class="section-be-four section-four">
    <div class="col-full">
        <div class="shape-group">
            <ul class="x-shape">
                <li class="shape shape-1"><div class="shape-bg-1"></div></li>
                <li class="shape shape-2"><div class="shape-bg-2"></div></li>
                <li class="shape shape-3"><div class="shape-bg-3"></div></li>
                <li class="shape shape-4"><div class="shape-bg-4"></div></li>
                <li class="shape shape-5"><div class="shape-bg-5"></div></li>
            </ul>
        </div>
    </div>
</section>

css html5

2 answers

2


Face to complicate... creates a svg with the shapes, puts the svg within a div with the image of background, then into that div use elements with position absolute to write and align text.

You will see that it uses almost nothing code, and the image I used as background-image div not to complicate making a patter/fill in the svg etc. so it is easy to change the image and the red color you can change in HEX in the fill of the second path fill="#FF0000" of svg

inserir a descrição da imagem aqui

Code of the image above

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
}
.imagem {
  background: url(https://unsplash.it/500/500);
  background-size: cover;
  width: 800px;
  height: 800px;
  margin: auto;
  position: relative;
}
.imagem  svg {
  display: block;
}
.imagem .texto {
  font-size: 32px;
  color: #fff;
  position: absolute;
  text-shadow: 1px 1px 4px black;
}
.texto.tl {
  top: 150px;
  left: 150px;
}
.texto.tr {
  top: 150px;
  right: 150px;
}
<div class="imagem">
  <svg width="800" height="800" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg">
    <rect width="800" height="800" fill="none"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M800 0H0V160V800H160H640H800L800 160L800 0ZM560 400L800 160L640 0.000167847L400 240L160 0.000172477L0 160L240 400L0.000140592 640L160 800L400 560L640 800L800 640L560 400Z" fill="white"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="M800 160L640 0.000167847L400 240L160 0.000172477L0 160L240 400L0.000140592 640L160 800L400 560L640 800L800 640L560 400L800 160ZM560 400L400 240L240 400L400 560L560 400Z" fill="#FF0000" fill-opacity="0.28"/>
  </svg>
  <span class="texto tl">texto 1</span>
  <span class="texto tr">texto 2</span>
</div>

  • 1

    Since it’s for simplicity, take out this ugly text-shadow rsrsrs. + 1 for the lean solution anyway.

  • @bfavaretto hahaha is pq I wanted to ensure the contrast of the text since it does not give to know the image that comes from CDN... But this is to the taste of the customer, you can even use Comic Sans if you want

  • Thanks @hugocsl helped me D+ ! For now I’ll just do a copy/Stop of what you did to advance the step here, but I wonder if you used any tool to do svg if yes which ? Abç!

  • 1

    @wbp I’m glad you helped out there. I used Figma, it’s free and runs in the browser, you draw there and already export as SVG, which by the way the SVG exported by it is of great code quality, very clean!

  • 1

    Thanks again @hugocsl! Hug!

-1

Create a div great where to put the image. Soon after create the other divs that will be in red, add a opacity on them and a rotation. Blank parts should also be a div where you’ll put backgroun-color: white without opacity. I don’t know if you could understand me, but it would just be a "game" of small elements on top of the main element that will contain a background with the image you chose.

Browser other questions tagged css html5

You are not signed in. Login or sign up in order to post.