Block header

HTML & CSS
1

Hello,anyone who can help me how to create block header like this one from pictures.tnx

2

It would help if you were a bit more specific about the problem.

Show us the code (HTML and CSS) you have so far, and explain where you need the help.

3

I’m not clear about what you mean by “block header”, but going by the image it looks like you want to have a background with a linear gradient and a right angle character aligned right.

2 Likes
4

block header means something like this

179Ă—539 23.7 KB

hm i will try with gradient thx for help…

5

Oke i made it with gradient

.gradient {
    position: relative;
    color: white;
    font-size: 100%;
    font-weight: bold;
    height: 30px;
    margin-bottom: .625em;
    width: 100%;
    float: left;
    background-image:
    linear-gradient(
      to right, 
      #03A9F4,
      #03A9F4 15%,
      #03A9F4 80%,
      #01579B 80%
     
    );
}

.my-icon{
    float: right;
     margin: -5px 4px 15px 15px;
}

Result:

but i dont know how to skew left side

Tnx Mittineague for help

6

Change the direction from to right to an angular value which can be expressed in degrees, like 30deg.

7

just replace 30deg with to right?

8
1 Like
9

replaced with 105deg and bingo thats it tnx guys

3 Likes
10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.