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

Html – How to create half border left and right full bottom with gradient css

How do I create half border left and right, with full bottom width, and a gradient, as shown in the following image:

I have tied several codes, but not the same output the left and right border should be half height and all of them should include the same gradient color.

Tags:

3

Answers


  1. 0 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .gradient-box {
            width: 200px;
            height: 100px;
            background: linear-gradient(to bottom, #ff8c00, #ff4500);
            /* Change the colors as needed */
            position: relative;
        }

        .gradient-box::before,
        .gradient-box::after {
            content: "";
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            border: 1px solid #000;
            /* Set the border color as needed */
            box-sizing: border-box;
        }

        .gradient-box::before {
            left: 0;
            border-right: none;
        }

        .gradient-box::after {
            right: 0;
            border-left: none;
        }
    </style>
</head>

<body>
    <div class="gradient-box"></div>
</body>

</html>
    Login or Signup to reply.
  2. 0

    You can put an element inside a container with gradient background and move it a bit to achieve that effect.

    .container {
  margin: 20px;
  width: 200px;
  background: linear-gradient(90deg, hsla(31, 94%, 57%, 1) 0%, hsla(27, 75%, 44%, 1) 94%);
  border-radius: 0 0 11px 11px;
}

.text {
  padding: 8px 14px;
  background-color: white;
  transform: translateY(-2px); /* Change thickness here */
  border-radius: 0 0 11px 11px;
}
    <body>
  <div class="container">
    <div class="text">Mansour</div>
  </div>
<body>
    Login or Signup to reply.
  3. 0

    Try this

    button {
    box-sizing: border-box;
    padding: 1rem 2.25rem;
    border-radius: 14px;
    border: none;
    position: relative;
    color: #343434;
    background: white;
    
}
button::before {
    content: '';
    display: block;
    position: absolute;
    border-radius: 15px;
    top: -0em;
    bottom: -0.2em;
    right: -0em;
    left: -0em;
    z-index: -1;
    background: linear-gradient(to left, red, yellow);
}
    <button>
        Hello
</button>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search