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

Invert html "contact us" ribbon when directions is rtl

I have a "contact us" ribbon that expands on hover. It sits on the right and expands to the left when hovered on (english version, dir=ltr).

:root {
  --color-ribbon-body: #FFD72A;
  --color-ribbon-tail: #FECC30;
  --color-ribbon-crease: #FC9544;
  --color-ribbon-shadow: #AFAFAF;
  --color-ribbon-foreground: #343434;
}

.contactus {
  top: calc(var(--app-header-height) + 50px);
  max-width: var(--app-max-width);
  box-sizing: border-box;
  transition: all 0.5s;
  position: fixed;
  left: unset;
  top: 50px;
  right: calc((100vw - 300px) / 2);
}

.contactus:after,
.contactus:before,
.contactusbutton:before,
.contactusbutton:after,
.contactusbutton>span:before {
  border-style: solid;
  position: absolute;
  content: '';
}

.contactus:before {
  background: var(--color-ribbon-shadow);
  border: none;
  height: 100%;
  width: 100%;
  z-index: -2;
  left: 0.2em;
  top: 0.25em;
}

.contactusbutton {
  background-color: var(--color-ribbon-body);
  color: var(--color-ribbon-foreground);
  padding: 6px 6px 6px 12px;
  position: relative;
  font-weight: 500;
  cursor: pointer;
  margin: 0 auto;
  display: block;
  outline: none;
  border: none;
  float: right;
  box-sizing: content-box;
  transition: all 0.75s;
  overflow-x: visible;
  height: 24px;
}

.contactusbutton:hover {
  padding: 6px 12px 6px 12px;
}

.contactusbutton:before {
  border-color: transparent var(--color-ribbon-crease) transparent transparent;
  border-width: .33em .99em 0 0;
  bottom: 100%;
  left: 0;
}

.contactusbutton:after {
  border-color: var(--color-ribbon-crease) transparent transparent transparent;
  border-width: .5em 2em 0 0;
  top: 100%;
  right: 0;
}

.contactus:after,
.contactusbutton>span:before {
  border-color: var(--color-ribbon-tail) transparent var(--color-ribbon-tail) var(--color-ribbon-tail);
  border-width: 1.1em 1em 1.1em 3em;
  z-index: -1;
  right: -2.4em;
  top: 0.5em;
}

.contactusbutton>span:before {
  border-color: var(--color-ribbon-shadow) transparent var(--color-ribbon-shadow) var(--color-ribbon-shadow);
  right: -2.3em;
  top: 0.7em;
}

.contactusbutton>svg {
  stroke: var(--color-ribbon-foreground);
  display: inline-block;
  stroke-width: 1.5;
  height: inherit;
  width: inherit;
}

.contactusbutton:hover>svg {
  stroke-width: 2.0;
}

.contactusbutton>span {
  transition: max-width 1s;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow-x: hidden;
  line-height: 150%;
  font-weight: 600;
  text-align: left;
  height: inherit;
  max-width: 0;
}

.contactusbutton:hover>span {
  max-width: 300px;
}

.container {
  width: 300px;
  height: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: solid 1px black;
}
<body>

  <div class="container"></div>
  <div class="contactus">
    <button class="contactusbutton">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-plus" width="44" height="44" viewBox="0 0 24 24" stroke-width="none" stroke="none" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <circle cx="9" cy="7" r="4" />
                <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                <path d="M16 11h6m-3 -3v6" />
            </svg>
            <span>Contact us</span>
        </button>
  </div>

</body>

I need this ribbon to be inverted when direction is rtl so it sits on the left and expands out to the right, with the text being on the left and the svg on the right.

I’ve tried many different ways but to be honest I’m shooting in the dark here, I’m not really a front-end developer.

Any help would be greatly appreciated!

Tags:

2

Answers


  1. 0

    Here is the solution. These are the changes I have made:

    .contactus {
    top: calc(var(--app-header-height) + 50px);
    max-width: var(--app-max-width);
    box-sizing: border-box;
    transition: all 0.5s;
    position: fixed;
    left: unset;
    top: 50px;
    /* right: calc((100vw - 300px) / 2); */
    left: calc((100vw - 300px) / 2);
    /* Removing the right property and positioning to the left with the left property */
}

.contactus span{
    transform: scale(-1,1);
    /* Transforming the text so that it's orientation remains the same */
}

.contactus span::before{
    display: none;
    /* a dark box and scrollbar appears after text transformation. So hiding them */
}

.contactus {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    -ms-filter: fliph; /*IE*/
    filter: fliph; /*IE*/
    /* Transforming the whole ribbon */
}


    

    

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --color-ribbon-body: #FFD72A;
            --color-ribbon-tail: #FECC30;
            --color-ribbon-crease: #FC9544;
            --color-ribbon-shadow: #AFAFAF;
            --color-ribbon-foreground: #343434;
        }

        .contactus {
            top: calc(var(--app-header-height) + 50px);
            max-width: var(--app-max-width);
            box-sizing: border-box;
            transition: all 0.5s;
            position: fixed;
            left: unset;
            top: 50px;
            /* right: calc((100vw - 300px) / 2); */
            left: calc((100vw - 300px) / 2);
        }

        .contactus:after,
        .contactus:before,
        .contactusbutton:before,
        .contactusbutton:after,
        .contactusbutton>span:before {
            border-style: solid;
            position: absolute;
            content: '';
        }

        .contactus:before {
            background: var(--color-ribbon-shadow);
            border: none;
            height: 100%;
            width: 100%;
            z-index: -2;
            left: 0.2em;
            top: 0.25em;
        }

        .contactusbutton {
            background-color: var(--color-ribbon-body);
            color: var(--color-ribbon-foreground);
            padding: 6px 6px 6px 12px;
            position: relative;
            font-weight: 500;
            cursor: pointer;
            margin: 0 auto;
            display: block;
            outline: none;
            border: none;
            float: right;
            box-sizing: content-box;
            transition: all 0.75s;
            overflow-x: visible;
            height: 24px;
        }

        .contactusbutton:hover {
            padding: 6px 12px 6px 12px;
        }

        .contactusbutton:before {
            border-color: transparent var(--color-ribbon-crease) transparent transparent;
            border-width: .33em .99em 0 0;
            bottom: 100%;
            left: 0;
        }

        .contactusbutton:after {
            border-color: var(--color-ribbon-crease) transparent transparent transparent;
            border-width: .5em 2em 0 0;
            top: 100%;
            right: 0;
        }

        .contactus:after,
        .contactusbutton>span:before {
            border-color: var(--color-ribbon-tail) transparent var(--color-ribbon-tail) var(--color-ribbon-tail);
            border-width: 1.1em 1em 1.1em 3em;
            z-index: -1;
            right: -2.4em;
            top: 0.5em;
        }

        .contactusbutton>span:before {
          border-color: var(--color-ribbon-shadow) transparent var(--color-ribbon-shadow) var(--color-ribbon-shadow);
          right: -2.3em;
          top: 0.7em;
        }

        .contactusbutton>svg {
            stroke: var(--color-ribbon-foreground);
            display: inline-block;
            stroke-width: 1.5;
            height: inherit;
            width: inherit;
        }

        .contactusbutton:hover>svg {
            stroke-width: 2.0;
        }

        .contactusbutton>span {
            transition: max-width 1s;
            display: inline-block;
            vertical-align: top;
            white-space: nowrap;
            overflow-x: hidden;
            line-height: 150%;
            font-weight: 600;
            text-align: left;
            height: inherit;
            max-width: 0;
        }

        .contactusbutton:hover>span {
            max-width: 300px;
        }

        .container {
            width: 300px;
            height: 300px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            border: solid 1px black;
        }

        .contactus span{
            transform: scale(-1,1);
        }

        .contactus span::before{
            display: none;
        }

        .contactus {
            -moz-transform: scaleX(-1);
            -webkit-transform: scaleX(-1);
            -o-transform: scaleX(-1);
            transform: scaleX(-1);
            -ms-filter: fliph; /*IE*/
            filter: fliph; /*IE*/
        }
    </style>
</head>
<body>
    <div class="container"></div>
    <div class="contactus">
        <button class="contactusbutton">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-plus" width="44" height="44" viewBox="0 0 24 24" stroke-width="none" stroke="none" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <circle cx="9" cy="7" r="4" />
                <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                <path d="M16 11h6m-3 -3v6" />
            </svg>
            <span class="my-span">Contact us</span>
        </button>
    </div>
</body>
</html>
    

    

    

    I don't know why "Run code snippet" is not working. You can copy paste and create an Html and will see the result easily.
    Login or Signup to reply.
  2. 0

    To do this add the following styles in your code:

    .contactus {
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   left: calc((100vw - 300px) / 2);
   right: unset;
}

.contactusbutton>span {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

    :root {
  --color-ribbon-body: #FFD72A;
  --color-ribbon-tail: #FECC30;
  --color-ribbon-crease: #FC9544;
  --color-ribbon-shadow: #AFAFAF;
  --color-ribbon-foreground: #343434;
}

.contactus {
  top: calc(var(--app-header-height) + 50px);
  max-width: var(--app-max-width);
  box-sizing: border-box;
  transition: all 0.5s;
  position: fixed;
  top: 50px;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  left: calc((100vw - 300px) / 2);
  right: unset;
}

.contactus:after,
.contactus:before,
.contactusbutton:before,
.contactusbutton:after,
.contactusbutton>span:before {
  border-style: solid;
  position: absolute;
  content: '';
}

.contactus:before {
  background: var(--color-ribbon-shadow);
  border: none;
  height: 100%;
  width: 100%;
  z-index: -2;
  left: 0.2em;
  top: 0.25em;
}

.contactusbutton {
  background-color: var(--color-ribbon-body);
  color: var(--color-ribbon-foreground);
  padding: 6px 6px 6px 12px;
  position: relative;
  font-weight: 500;
  cursor: pointer;
  margin: 0 auto;
  display: block;
  outline: none;
  border: none;
  float: right;
  box-sizing: content-box;
  transition: all 0.75s;
  overflow-x: visible;
  height: 24px;
}

.contactusbutton:hover {
  padding: 6px 12px 6px 12px;
}

.contactusbutton:before {
  border-color: transparent var(--color-ribbon-crease) transparent transparent;
  border-width: .33em .99em 0 0;
  bottom: 100%;
  left: 0;
}

.contactusbutton:after {
  border-color: var(--color-ribbon-crease) transparent transparent transparent;
  border-width: .5em 2em 0 0;
  top: 100%;
  right: 0;
}

.contactus:after,
.contactusbutton>span:before {
  border-color: var(--color-ribbon-tail) transparent var(--color-ribbon-tail) var(--color-ribbon-tail);
  border-width: 1.1em 1em 1.1em 3em;
  z-index: -1;
  right: -2.4em;
  top: 0.5em;
}

.contactusbutton>span:before {
  border-color: var(--color-ribbon-shadow) transparent var(--color-ribbon-shadow) var(--color-ribbon-shadow);
  right: -2.3em;
  top: 0.7em;
}

.contactusbutton>svg {
  stroke: var(--color-ribbon-foreground);
  display: inline-block;
  stroke-width: 1.5;
  height: inherit;
  width: inherit;
}

.contactusbutton:hover>svg {
  stroke-width: 2.0;
}

.contactusbutton>span {
  transition: max-width 1s;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow-x: hidden;
  line-height: 150%;
  font-weight: 600;
  text-align: left;
  height: inherit;
  max-width: 0;
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.contactusbutton:hover>span {
  max-width: 300px;
}

.container {
  width: 300px;
  height: 300px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: solid 1px black;
}
    <div class="container"></div>
  <div class="contactus">
    <button class="contactusbutton">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-user-plus" width="44" height="44" viewBox="0 0 24 24" stroke-width="none" stroke="none" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <circle cx="9" cy="7" r="4" />
                <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
                <path d="M16 11h6m-3 -3v6" />
            </svg>
            <span>Contact us</span>
        </button>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search