Docs

[mahmoud237]

Hi

How can I make custom background shape just like the attached photo ?

[mahmoud237]

This reply has been marked as private.

[Christopher]

Hey there,

Thanks for writing in! Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[mahmoud237]

I understand that … I have a designer works with me … what I should request from him exactly to make this effect ?

[Nabeel A]

Hi again,

You can show the above screenshot you attached to your designer.

Cheers!

[mahmoud237]

Ok I managed to do it using this code:

.triangle {
  position: relative;  
}

.triangle::before,
.traingle::after {
  position: absolute;
	content: '';
	pointer-events: none;
  box-sizing: border-box;
  top:0;
  border-style: solid;
  border-width: 50px 300px 0 300px;
  border-color: #41CAFC transparent transparent transparent;	
}

The only thing I can’t do is that I want it to be horizontally centered … I can use:

left: 22%

But that code isn’t effective because it will change it’s position if the screen width change … I want to be centered on all devices

Thanks

[mahmoud237]

check the image

[Thai]

Hi There,

Please add this CSS:

    left: 50%;
    margin-left: -300px;

http://i.imgur.com/UkbDeuv.png

Hope it helps 🙂

[mahmoud237]

Thanks, it works 🙂

[Rupok]

You are welcome!

Glad that it helped. Feel free to let us know if you face any other issue. We’ll be happy to assist you.

Thanks for using X.

Cheers!

[Author]

Posts