Angle banner in css/bootstrap

You can do like this.

Uses Bootstrap 4 flex styles to create the container.
CSS

<style>
.slant {
	background: red;
	line-height: 50px;
	text-align: center;
	width: 60%;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.slant::after {
	position:absolute;
	content: " ";
	display:block;
	left:50%;
	bottom:-20px;
	width:100%;
	transform: rotate(140deg);
	background: white;
	top: 0;
}
</style>

Select allOpen in new window

HTML

<div class="d-flex">
  <div class="slant">Text</div>
  <div>Tel Number</div>
</div>

Select allOpen in new window

Working sample here

The principle is to add a pseudo block after the container and rotate it. Give it a different colour to create the background slant and then clip the container with overflow hidden:

Wahoo! This was great.
Many thanks.

I have applied the code and it worked. On the right hand side I made the background color to black.

But right hand side width is not covering full. The black color should fill untill end.
Any changes we need to do in CSS.

Please advise.
slicedimage2.jpg

What is your markup - can't do anything with an image,

Please find below my markup

<div>
    <div class="d-flex">
        <div class="slant">START EXECUTING YOUR PROJECT</div>
        <div style="background-color:black">
            <a href="#" class="themesflat-button bg-white small">
                <span style="width='25%'">
                    <span class="icon">
                        <i class="autora-icon-phone-contact"> </i>
                    </span> 0123455
                </span>
            </a>
        </div>
    </div>
    <!-- /.col-md-12 -->
    <!-- /.row -->
    <!-- /.container -->
</div>

Select allOpen in new window

.slant {
    background: red;
    line-height: 50px;
    text-align: center;
    width: 60%;
    color: #fff;
    position: relative;
    overflow: hidden;
}

    .slant::after {
        position: absolute;
        content: " ";
        display: block;
        left: 50%;
        bottom: -20px;
        width: 100%;
        transform: rotate(140deg);
        background: black;
        top: 0;
    }

Select allOpen in new window

Mind blowing.
Great. Many Thanks

You are welcome

Hi Julian,

This banner has issue in devices like iPhone 6.
Please see how it is looking.
Please advise the solution for this.

Thanks,
slicedBannerIssue.jpg

Where is your markup?

Does it look like that in the emulator as well?

HI Julian,

Please find my marker below:

<div>
    <div class="d-flex">
        <div class="slant">START EXECUTING YOUR PROJECT</div>
        <div style="background-color:black;width: 40%" class="flex-grow-1">
            <a href="#" class="themesflat-button bg-white small">
                <span style="width='25%'">
                    <span class="icon">
                        <i class="autora-icon-phone-contact"> </i>
                    </span> (+123) 123 345
                </span>
            </a>
        </div>
    </div>
</div>

Select allOpen in new window

Thanks for your support.

Hi Julian,

Kindly advise.

Regards,

I don't understand what you are trying to do - you have a 40% width dive with a 25% div inside it - this has nothing to do with the iphone this has to do with your markup.

Take a look at your code I have implemented here http://www.marcorpsa.com/ee/t3427b.html

You have coded it to look like the image you show above.

Thanks Julian for your reply

If I see the banner in your URL. It also has the same issue.

1. The slant line is not coming until end. It started another cut from R end.

Please see attached the image

Please advise.
slicedBannerIssue-1.jpg

That is what I was saying - we had a solution that worked you have changed that to one that does not work - i.e. you have specifically coded the banner to look the way it does - I was asking why?

If we had a solution that demonstrated how to render the banner - why did you change that - what is it you were trying to achieve?

Hi Julian,

Very sorry, I am not understanding. My bad.

Just wanted to understand where I have changed the solution.

I had a requirenment that banner should be:

https://filedb.experts-exchange.com/incoming/2018/10_w43/1397141/slicedImage.png 

Then you provided me the code which I implemented and made color as black instead of white.

And where I need to show phone no there I have added as a span as per the approved design.

See in attached "BannerwithPhSpan.jpg" that how phone no is displayed.

Do you mean because of the span it is giving issue, Sorry just wanted to know.

Markup provided and used are as below:

<div class="d-flex">
    <div class="slant">Text</div>
    <div>Tel Number</div>
</div>

Select allOpen in new window

<div>
    <div class="d-flex">
        <div class="slant">START EXECUTING YOUR PROJECT</div>
        <div style="background-color:black;width: 40%" class="flex-grow-1">
            <a href="#" class="themesflat-button bg-white small">
                <span style="width='25%'">
                    <span class="icon">
                        <i class="autora-icon-phone-contact"> </i>
                    </span> (+123) 123 345
                </span>
            </a>
        </div>
    </div>
</div>

Select allOpen in new window

Please advise.

Regards,
BannerwithPhSpan.jpg

Your problem is here - you are limiting the span to 25% width

<span style="width='25%'">

Select allOpen in new window

Many Thanks Julian for helping me out.

I removed 25% width and it is still giving me the same issue.

Also, I did a width change inside the 40% div as I don't wanted that phone white area to capture entire black section.

https://filedb.experts-exchange.com/incoming/2018/10_w44/1398320/BannerwithPhSpan.jpg

You must have seen my final required output. If I don't play with width and height then how phone area will be built in black area.

<div>
    <div class="d-flex">
        <div class="slant">START EXECUTING YOUR PROJECT</div>
        <div style="background-color:black;width: 40%" class="flex-grow-1">  
        <a href="#" class="themesflat-button bg-white small"><span> <span class="icon"> 
            <i class="autora-icon-phone-contact"> </i> </span> (+613) 8376 6284 </span></a></div>
    </div>
    
</div>

Select allOpen in new window

Regards,
slicedBannerIssue-2.jpg

Firstly Dinesh - this question has been closed. If you have another question you should open a new thread for it.

Secondly, I am struggling to see what the problem is here. You are concerned about what it looks like on mobile - well the reality of the situation is you are trying to push a square peg into a round hole.

The content you are trying to squeeze into a mobile screen is too large.

You post full width mockup of what you want and a demonstration of how it looks on mobile - you can't fit that content into a smaller screen.

What you need to do is show me the artwork of what it SHOULD look like on a mobile screen - not show me the full width banner - I can't do anything with that.

When designing for mobile - you design what your mobile screen is going to look like first - then you expand on that for desktop - you have done it the other way around.

Show me what the mobile screen should look like and we can take it from there.

Please open this in another thread though - and post the link to the new thread here. In the new thread refer to this question so new experts can get a context.

Many Many Thanks Julian for all your great great help.
As advised I will open new question.

Thanks allot.

Hi Julian,

As advised, I have open another question for mobile as this problem was resolved.

https://www.experts-exchange.com/questions/29126131/Slant-banner-on-mobile.html

Regards,