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

Html – Clip path Polygon

my css code is :

.myButton {
    box-shadow:inset 0px 1px 3px -50px #91b8b3;
    background-color:transparent;
    border:4px solid #566963;
    display:inline-block;
    cursor:pointer;
    color: yellow;
    font-family:Arial;
    font-size:20px;
    font-weight:bold;
    padding:12px 23px;
    text-decoration:none;
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

I am expecting the text should be yellow and background should be transparent and border should be 4px yellow, and need borders on all sides, and shape will be the same as given buttonenter image description here

Tags:

2

Answers


  1. 0

    You can rely on pseudo-element and generate a specific clip-path for the border. I have a generator for this: https://css-generators.com/custom-corners/

    CSS Generators: Custom Corners

    button {
  margin: 20px;
  font-size: 20px;
  line-height: 1.6em;
  padding: 0 20px 0 10px;
  border: none;
  background: none;
  position: relative;
}

button:before {
  content: "";
  position: absolute;
  inset: -5px;
  background: #91b8b3;
  clip-path: polygon(0 0,calc(100% - 1.00em) 0,100% 1.00em,100% calc(100% - 1.00em),calc(100% - 1.00em) 100%,0 100%,0 0,5px  5px ,5px calc(100% - 5px),calc(100% - 1.00em - 2.07px) calc(100% - 5px),calc(100% - 5px) calc(100% - 1.00em - 2.07px),calc(100% - 5px) calc(1.00em + 2.07px),calc(100% - 1.00em - 2.07px) 5px,5px 5px);
}
    <button>button</button>
    Login or Signup to reply.
  2. 0

    There is another cool website with tons of helpful tools in HTML / CSS / JS.

    It is 1005.com.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search