Question 244062 in Html Question posted in
Some basic documentation can be found here.

solve html and css rectangle button design?

how to design in html and css code? it is properly design this problem solve

enter image description here

I try this problem but i cannot do it. i want to this problem solve with html and css code.

Tags:

2

Answers


  1. 0

    Try this

    .trapezium-button {
  display: inline-block;
  position: relative;
  padding: 10px 20px;
  background-color: #3498db;
  /* Background color of the rectangle */
  color: #fff;
  /* Text color */
  font-size: 16px;
  border: 2px solid #2980b9;
  /* Border color */
  overflow: hidden;
  z-index: 1;
}

.trapezium-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 120% 100%);
  background-color: #e74c3c;
  /* Background color of the trapezium */
  z-index: 0;
}

.diagonal-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 120% 100%);
  background-color: transparent;
  z-index: 2;
}

.trapezium-button span {
  position: relative;
  z-index: 3;
}
    <div class="trapezium-button">
  <span>Button Text</span>
  <div class="trapezium-background"></div>
  <div class="diagonal-line"></div>
</div>

    You may adust the shape by adjusting the values in line clip-path: polygon(0 0, 100% 0, 100% 100%, 120% 100%); under .trapezium-backgroundand .diagonal-line, especially what you see as 120%.

    Hope this is what you were looking for and you are able to move forward.

    Login or Signup to reply.
  2. 0

    Based on the design an approach to the solution could be based on the CSS perspectives and rotations.

    .container{
    height: 76px;
    width: 250px;
    margin: 0 auto;
    position: relative;
    -webkit-perspective: 550px;
}

.button {
    -webkit-transform: rotateY( 38deg ) rotateZ( 1deg );
    position: absolute;
    height: 60px;
    width: 220px;
    background: #3bd770;
}

.container span {
    position: relative;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    display: block;
    width: 200px;
    text-align: center;
    padding-top: 15px;
}
    <div class="container">
  <div class="button"></div>
  <span>Join us today!</span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search