Anyone have any idea why this is happening? I've been hitting my head on the desk for the last 2 hours, trying to figure out why the cursor gets displaced on the iPad. Check out my video to see it:
http://tinypic.com/r/20k6338/7
Here is my CSS:
#newroar-ipad {
position: fixed;
display: block;
opacity: 0;
left: 5px;
top: 0px;
height: 480px !important;
width: 550px !important;
margin-top: 30px;
pointer-events: none;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#CCCCCC));
z-index: 4;
-webkit-border-radius: 5px;
-webkit-box-shadow: 0px 4px 5px #000;
-webkit-transition: -opacity 0.0s ease-out;
-webkit-transition-duration: .4s;
-webkit-transform: translate(0px, -20px);
}
#newroar-ipad.show {
opacity: 1.0;
pointer-events: auto;
z-index: 4;
-webkit-transition-duration: .4s;
-webkit-transform: translate(0px, 15px);
}
#newroar-ipad-content-header {
margin-top: 10px;
z-index: 4;
width: 548px;
height: 55px;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EBEBEB), to(#CCC));
border: 1px solid #CCC;
}
#newroar-ipad-content {
margin-top: 0px;
margin-left: 2px;
background: none;
top: 0;
width: 542px;
height: 400px;
z-index: 4;
}
.newroar-inputfield {
-webkit-appearance: none;
height: 20px !important;
width: 90%;
margin-left: 18px;
margin-bottom: 10px;
background: #FFF;
color: #666;
font-size: 12px;
border-style: none;
padding: 10px;
-webkit-border-radius: 5px !important;
}
.newroar-textarea {
-webkit-appearance: none;
width: 90%;
height: 120px;
margin-left: 18px;
margin-bottom: 10px;
background: #FFF;
color: #666;
font-size: 12px;
border-style: none !important;
border: none !important;
padding: 10px;
-webkit-border-radius: 5px !important;
-webkit-box-shadow: none !important;
outline: none !important;
}
.newroar-selectfield {
font-size: 14px !important;
height: 30px !important;
width: 300px !important;
margin-left: 18px !important;
margin-top: 25px !important;
margin-bottom: 25px !important;
}
You can see I have tried using !important in case it was bringing styling for other form elements in the CSS document, and I tried the -webkit-appearance to see if it would fix it... with no avail. =(
Thanks for any advice you may have!
can you try using position:absolute , rather than fixed
#newroar-ipad {
position: absolute;
/* other style codes */
}
Because ios usually move the input box in focus , to just above the keypad. Seems like the position:fixed code is bringing it back to its original position.
Related
The screenshot attached explains everything about the desired effect. I was thinking to decrease the border width from 4px to 3px to 2px , I don't want to apply ease-in/ease out effect. As of now, when I hover, it looks like this. I want to change this box through the effect displayed in the first screenshot.
For reference,
I am posting the code below:
&__link {
#include font-text(default, menuitem);
#include token(font-size, sidenav, default);
background-image: none;
text-transform: uppercase;
padding: 1rem;
margin: 0;
&:before {
position: absolute;
right: 1.3rem;
top: 2rem;
width: 1px;
content: '';
background: #fff;
height: 100%;
opacity: 0.3;
}
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 10px;
height: 10px;
outline: 1px solid #fff;
top: -1px;
}
&:hover {
#include font-text(default, menuitem);
#include token(font-size, sidenav, hover);
font-weight: 600;
margin: 0;
padding: 1rem;
&:after {
background: white;
box-shadow: 0 0 10px 1px rgba(255, 255, 255, 1);
}
}
}
&:after represents the code for the box. Thanks in advance.
<div class="box">
</div>
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 200px;
width: 200px;
text-decoration: none;
background-color: white;
background-image: linear-gradient(#000, #000);
border: 1px solid black;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 0%;
transition: .5s;
}
.box:hover {
background-size: 95% 95%;
}
Didnt understand the question too well but this does the attached screenshot animation
Try it - you need to set animations, bcz you want several situations for single event (hover)
Replace these blocks
&:after {
display: inline-block;
vertical-align: middle;
position: relative;
content: '';
width: 0px;
height: 0px;
top: -1px;
background: white;
border: 7px solid #fff;
}
&:hover:after {
animation: sqr .3s linear;
animation-fill-mode: forwards;
}
#keyframes sqr {
30%{
border: 5.5px solid #fff;
width: 3px; height: 3px;
background: black;
}
80%{
border: 4px solid #fff;
width: 6px;
height: 6px;
background: black;
}
100%{
border: 3px solid #fff;
width: 8px;
height: 8px;
transform: scale(1.5);
box-shadow: 0 0 5px 2px #fff;
background: black;
}
}
I am animating a background to move but as expected using Background-position results in poor performance.
I am unable to alter or change the HTML or add any scripts
I have attempted using translate but this moves the entire div element rather than just the background, As mentioned I am not able to create a separate div for the background alone resulting in this roadblock.
.wm-outer-div {
width: auto !important;
min-width: 400px !important;
max-width: 500px !important;
padding: 0 !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
border-radius: 15px !important;
box-shadow: rgba(50, 50, 50, 0.45) 0px 0px 10px 0px;
background-color: rgb(255, 255, 255);
padding: 18px 22px 20px;
position: absolute;
width: 304px;
color: rgb(55, 55, 55);
font-family: walkme-opensans, sans-serif;
display: block;
margin: 0px;
vertical-align: baseline;
border-collapse: inherit;
background-image: none;
line-height: normal;
height: 300px;
text-indent: inherit;
letter-spacing: normal;
text-transform: none;
text-shadow: none;
border-style: none;
border-width: medium;
transition: none 0s ease 0s;
box-sizing: content-box;
direction: ltr;
z-index: 2147483632;
opacity: 1;
}
.wm-outer-div:after {
content: "" !important;
z-index: -1 !important;
background-color: #1E365E !important;
background-image: url("https://www.dropbox.com/s/zrzzbsa5b39w8ra/image.jpg dl=1") !important;
position: absolute !important;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
animation: slide 120s linear infinite !important;
repeat: repeat !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
border-radius: 15px !important;
}
#keyframes slide {
from {
transform: translateY(0);
}
to {
transform: translateY(-187%);
}
}
<div class="wm-outer-div wm-shoutout wm-shoutout-165013 wm-template-bg wm-template-small-corner wm-ltr wm-chrome wm-design-template-207418 wm-position-center" id="wm-shoutout-165013"></div>
Is there a way to target the background image separately to use translate without the addition of another div/wrapper so only the background moves and not the entire div element?
Failing that is there another option that could improve the performance of the background animation?
Make the pseudo element bigger to be sure you will cover the needed area when translating:
.wm-outer-div {
min-width: 400px !important;
max-width: 500px !important;
padding: 0 !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
border-radius: 15px;
box-shadow: rgba(50, 50, 50, 0.45) 0px 0px 10px 0px;
background-color: rgb(255, 255, 255);
padding: 18px 22px 20px;
width: 304px;
color: rgb(55, 55, 55);
height: 300px;
z-index: 0;
position:relative;
overflow:hidden;
}
.wm-outer-div:after {
content: "";
z-index: -1;
background-color: #1E365E !important;
background-image:url(https://i.stack.imgur.com/DpyrV.jpg);
background-size:cover;
position: absolute;
top: -100%;
left: -100%;
width: 300% ;
height: 300%;
animation: slide 2s linear infinite alternate;
box-sizing: border-box;
}
#keyframes slide {
from {
transform: translateY(33%);
}
to {
transform: translateY(-33%);
}
}
<div class="wm-outer-div wm-shoutout wm-shoutout-165013 wm-template-bg wm-template-small-corner wm-ltr wm-chrome wm-design-template-207418 wm-position-center" id="wm-shoutout-165013"></div>
.wm-outer-div {
width: auto !important;
min-width: 400px !important;
max-width: 500px !important;
padding: 0 !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
border-radius: 15px !important;
box-shadow: rgba(50, 50, 50, 0.45) 0px 0px 10px 0px;
background-color: rgb(255, 255, 255);
padding: 18px 22px 20px;
position: absolute;
width: 304px;
color: rgb(55, 55, 55);
font-family: walkme-opensans, sans-serif;
display: block;
margin: 0px;
vertical-align: baseline;
border-collapse: inherit;
background-image: none;
line-height: normal;
height: 300px;
text-indent: inherit;
letter-spacing: normal;
text-transform: none;
text-shadow: none;
border-style: none;
border-width: medium;
transition: none 0s ease 0s;
box-sizing: content-box;
direction: ltr;
z-index: 2147483632;
opacity: 1;
overflow: hidden
}
.wm-outer-div:after {
content: "";
background-image: url("https://thumbs-prod.si-cdn.com/c3phl1TZgQ92bLQugItmtovLZhs=/fit-in/1600x0/https://public-media.si-cdn.com/filer/54/10/5410da58-2295-4e3a-a847-fecd41cdcdd9/scarlet_tanager.jpg") !important;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateX(-150px) translateY(150px)
}
<div class="wm-outer-div wm-shoutout wm-shoutout-165013 wm-template-bg wm-template-small-corner wm-ltr wm-chrome wm-design-template-207418 wm-position-center" id="wm-shoutout-165013"></div>
I have an element with a known ID I can target. How could I create a bestseller-badge like this with css only? I cannot change the html.
I know how to create this but only if I could edit the html, which I cannot:
.box {
width: 200px; height: 300px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
}
.ribbon {
position: absolute;
right: -5px; top: -5px;
z-index: 1;
overflow: hidden;
width: 75px; height: 75px;
text-align: right;
}
.ribbon span {
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 100px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 19px; right: -21px;
}
.ribbon span::before {
content: "";
position: absolute; left: 0px; top: 100%;
z-index: -1;
border-left: 3px solid #79A70A;
border-right: 3px solid transparent;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
.ribbon span::after {
content: "";
position: absolute; right: 0px; top: 100%;
z-index: -1;
border-left: 3px solid transparent;
border-right: 3px solid #79A70A;
border-bottom: 3px solid transparent;
border-top: 3px solid #79A70A;
}
<div class="box">
<div class="ribbon"><span>Bestseller</span></div>
</div>
The thing is I only have the parent box and not the ribbon inside. I cant input html.
Because in pseudo elements you can't put any html markup, you need to get clever with just using simple shapes and combining them together. Additionally, you can't have multiple :after pseudo elements, so we are limited to just two shapes (one for :after and one for :before). The one in :after could be the bestseller front of the badge, with text. The trickiest part was to get the clip-path: polygon(...points) to get right so that we get the effect of trimmed ribbon. Fortunately, Firefox dev tools have a nifty polygon modification tool that was very helpful. Getting the two little corners that make the "wrap around" effect was a bit trickier, but putting it in a :before pseudo element with z-index: -1 and a little hand-tweaked offset did the trick. The end effect is below:
.box {
width: 200px; height: 300px;
position: relative;
border: 1px solid #BBB;
background: #EEE;
margin: 20px;
display: inline-block;
}
.bestseller:before {
content: "";
z-index: -1;
overflow: hidden;
transform: rotate(-135deg);
width: 120px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 34px;
right: -16px;
clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px, 110px 30px);
height: 20px;
width: 120px;
}
.bestseller:after {
content: "bestseller";
z-index: 1;
overflow: hidden;
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 20px;
transform: rotate(45deg);
width: 120px;
display: block;
background: #79A70A;
background: linear-gradient(#9BC90D 0%, #79A70A 100%);
box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
position: absolute;
top: 20px; right: -30px;
clip-path: polygon(120px 20px, 90px -10px, 30px -10px, 0px 20px, 10px 30px, 110px 30px)
}
<div class="box">
</div>
<div class="box bestseller">
</div>
With the help of only CSS using pseudo class, we cannot create exactly the same but similar to that is possible. Add the id "ribbon" to div with class "box" and try with the below css. Increment/decrement the height, top right, etc based on the size of your div.
#ribbon:before {
content: "";
width: 60px;
display: block;
position: absolute;
top: 14px;
right: -28px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid green;
height: 0;
}
#ribbon:after {
content: "Bestseller";
font-size: 10px;
font-weight: bold;
color: #FFF;
text-transform: uppercase;
text-align: center;
line-height: 30px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 60px;
display: block;
position: absolute;
top: 14px;
right: 2px;
height: 30px;
}
Instead of trying with border for the background color of ribbon, you can also try using an ribbon image as background and use the text on top of it.
I'm trying to design a button using only CSS, and no images. The issue is with the bottom-left and top-right corners, and I'm using a background-color to achieve this when the button is on a solid background color. The issue is when the background is not a solid color and you can see the corners, like in the demo below.
So, I'd like to come up with a universal way to code this button with just CSS and no images.
Thanks!
Here is a demo of the button →
Here is the HTML I have in my demo:
<div id="banner">
<div id="button-box">
<a class="btn-cornered btn-cornered-dark-bg" href="#"><span>Learn More</span></a>
</div>
</div>
And the CSS:
#banner {
background: url('https://d3vv6lp55qjaqc.cloudfront.net/items/2D1R0A0B1q031R1C2P26/Image%202017-11-07%20at%201.57.17%20PM.png?X-CloudApp-Visitor-Id=8b9380dd59b56afec49e5f1e289c6692&v=53edcac2') no-repeat center -420px;
background-size: cover;
display: block;
width: 100%;
height: 200px;
text-align: center;
}
#button-box {
padding: 50px 0;
}
/* Button */
.btn-cornered {
padding-left: 20px;
padding-right: 20px;
position: relative;
display: inline-block;
line-height: 53px;
text-align: center;
color: #fff;
font-size: 24px;
border: 1px solid #fff;
border-bottom-left-radius: 10px;
border-top-right-radius: 10px;
text-decoration: none;
}
.btn-cornered:before {
position: absolute;
left: -1px;
bottom: -1px;
content: "";
border-bottom: 11px solid #fff;
border-right: 11px solid transparent;
}
.btn-cornered:after {
position: absolute;
left: -2px;
bottom: -2px;
content: "";
border-bottom: 11px solid;
border-right: 11px solid transparent;
}
.btn-cornered span {
top: -2px;
left: -1px;
position: relative;
padding-right: 20px;
display: block;
-webkit-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
.btn-cornered span:before {
position: absolute;
content: "";
border-bottom: 11px solid transparent;
border-right: 11px solid #fff;
}
.btn-cornered span:after {
position: absolute;
content: "";
border-bottom: 11px solid transparent;
border-right: 11px solid;
}
/* Dark Background Styles */
.btn-cornered-dark-bg {
height: 53px;
}
.btn-cornered-dark-bg:after {
border-bottom-color: #000000;
}
.btn-cornered-dark-bg span {
max-width: none;
line-height: 58px;
font-size: 24px;
height: 53px;
width: calc(100% + 2px);
}
.btn-cornered-dark-bg span:before {
right: 1px;
top: 1px;
}
.btn-cornered-dark-bg span:after {
border-right-color: #000;
right: 0px;
top: 0px;
}
Here's an example using pseudo elements and an extra span that is skewed to make the angled corners. The trick is hiding the overflow on the button and, with a little finesse, correctly lining up the skewed borders from the span.
I'm not fully satisfied as it requires the extra span and seems a bit fragile when changing font sizes, but here it is:
*, *:before, *:after {
box-sizing: border-box;
}
body {
background: steelblue;
}
button {
background: transparent;
padding: 10px 20px;
position: relative;
border: none;
margin: 20px;
overflow: hidden;
color: white;
}
button::before {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 15px;
right: 15px;
content: '';
border-left: 1px solid white;
border-top: 1px solid white;
}
button::after {
display: block;
position: absolute;
bottom: 0;
right: 0;
top: 15px;
left: 15px;
content: '';
border-right: 1px solid white;
border-bottom: 1px solid white;
}
button span {
display: block;
position: absolute;
z-index: -1;
top: 0;
right: -18px;
bottom: 0;
left: 15px;
border: 1px solid white;
transform: skew(45deg);
transform-origin: bottom left;
}
<button>
<span></span>
Sign up & Stay Connected
</button>
Clip-path solution
It is done by pseudo element after which is clipped using css3 clip-path to desired shape. However, clip-path is not supported by IE and Edge (Can I use). It can be little tricky to change values in clip-path to get desired width of border and length of "cutted triangle" so I create little script for that - Codepen
a {
position: relative;
padding: 8px 20px;
}
a::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
-webkit-clip-path: polygon(calc(100% - 2px) 11px, calc(100% - 2px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 2px), 11px calc(100% - 2px), 2px calc(100% - 11px), 2px 2px, calc(100% - 11px) 2px);
clip-path: polygon(calc(100% - 2px) 11px, calc(100% - 2px) 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0, 0% 0%, 0% calc(100% - 10px), 10px 100%, 100% 100%, 100% calc(100% - 2px), 11px calc(100% - 2px), 2px calc(100% - 11px), 2px 2px, calc(100% - 11px) 2px);
}
Text Here
Demo - JS Bin
Thanks everyone for your solutions and suggestions. For what it's worth, this is the solution I came up.
CSS:
.abutton {
overflow: hidden;
position: relative;
z-index: 1;
padding: 10px 20px;
border: none;
background: transparent;
text-align: center;
line-height: 1;
font-size: 24px;
color: #fff;
display: inline-block;
text-decoration: none;
}
.abutton:before {
content: '';
display: block;
position: absolute;
top: 0;
right: 8px;
bottom: 8px;
left: 0;
border-left: 1px solid #ffffff;
}
.abutton:after {
content: '';
display: block;
position: absolute;
top: 8px;
right: 0;
bottom: 0;
left: 15px;
border-right: 1px solid #ffffff;
}
.abutton span {
width: 100%;
height: 100%;
display: block;
position: absolute;
z-index: -1;
top: 0;
left: 0;
}
.abutton span:before,.abutton span:after {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
-webkit-transform: skew(45deg);
transform: skew(45deg);
}
.abutton span:before {
left: 8px;
bottom: 0;
border-bottom: 1px solid #fff;
border-left: 1px solid #fff;
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
}
.abutton span:after {
top: 0;
right: 8px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform-origin: top right;
transform-origin: top right;
}
footer .abutton {
font-size: 21px;
}
.abutton:hover {
color: #666;
}
.abutton:hover span:before,.abutton:hover span:after {
background-color: #fff;
}
#button-frame {
background: #666;
min-height: 200px;
padding: 20px;
}
HTML:
<div id="button-frame">
<a class="abutton" href="#"><span></span>Learn More</a>
</div>
I need to create the button styles in the image below (the one on the right is transparent, not white).
The bottom right corner is obviously the tricky part. It's not just a simple bevel; it's slightly rounded.
The best solution I've come up with is to apply an SVG image mask to a pseudo element positioned to the right of the button and reduce the right padding to compensate. But this approach has its limitations:
it requires a fixed height button (at least, if I want maintain the aspect ratio of the corner)
it requires a different SVG for each button size
I don't see how it can work for the transparent button style
So I'm hoping someone can suggest a different/better approach!
Thanks
UPDATE:
Here is my current approach - https://codepen.io/peteheaney/pen/jwVEPm
$primary: #FAB500;
*, *::after, *::before {
font-family: sans-serif;
box-sizing: border-box;
}
.button {
background-image: none;
border-width: 2px;
border-style: solid;
border-color: transparent;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-bottom: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
transition: all 0.2s;
&:active,
&:hover,
&:focus {
text-decoration:none;
}
&--large {
font-size: 15px;
padding-left: 24.818px;
height: 52px;
line-height: 52px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
position: relative;
margin-right: 24.818px;
&:after {
border-top: 2px solid $primary;
border-bottom: 2px solid $primary;
background: $primary;
content: "";
border-top-right-radius: 6px;
position: absolute;
left: 100%;
bottom: -2px;
width: 24.818px;
height: 52px;
mask: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-right.svg) top left / cover;
}
}
&--primary {
color: #000;
background-color: $primary;
border-color: $primary;
&:active,
&:hover,
&:focus {
background-color: darken($primary, 2%);
border-color: darken($primary, 2%);
}
}
}
If you don't mind leaving the corner clickable, you could make the button invisible and just use a background image:
button{
width:x;
height:y;
border:none;
background-color:none
background-image:url(button_image.png);
background-position:center;
background-size:x y;
background-repeat:no-repeat;
}
With button_image.png being the image of your button style without text.
You can try to draw it like this using before and after :
.button {
position: relative;
display: inline-block;
background-color: orange;
color: white;
padding: 20px 40px;
font-size: 14px;
border-radius: 5px;
text-decoration: none;
}
.button:after {
content: '';
position: absolute;
z-index: 10;
display: block;
bottom: -6px;
right: -2px;
width: 10px;
height: 20px;
transform: rotate(45deg);
background-color: white;
}
.button:before {
content: '';
position: absolute;
z-index: 100;
display: block;
bottom: -1px;
right: 4px;
width: 13px;
height: 23px;
transform: rotate(45deg);
background-color: orange;
border-radius: 10px;
}
Button
Here is an example of how this could possibly be achieved with pure CSS.
However an image or an SVG might be a more efficient way to solve this issue.
.Large{
position:relative;
display:inline-block;
background:#FFB300;
border:none;
padding:20px 0 20px 30px;
border-radius:10px 0 0 10px;
height:40px;
font:700 1.5em/40px Arial;
}
.Large::after{
content:"";
display:block;
position:absolute;
top:0;
right:-30px;
width:30px;
height:50px;
background:#FFB300;
border-radius:0 10px 0 0;
}
.Large::before{
content:"";
display:block;
position:absolute;
bottom:0;
right:-30px;
width:0;
height:0;
border-top: 15px solid #FFB300;
border-right: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #FFB300;
}
<a class="Large">LARGE</a>
I am not really happy with my result, but here it goes just in case you can make it better.
The different color is just to make it easier to see what is what.
I have focused on solving the transparent one. Once you have it, solving the other is easier.
:root {
--width: 10px;
--width2: 14px;
}
.test {
position: relative;
margin: 20px;
width: 300px;
height: 150px;
position: absolute;
border: var(--width) solid transparent;
border-image: linear-gradient(to bottom right, orange 0%, orange 70%, transparent 70%);
border-image-slice: 1;
}
.test:before {
content: "";
position: absolute;
height: 25px;
width: 150px;
right: 29px;
bottom: -10px;
transform: skewX(-45deg);
border: solid 0px transparent;
border-bottom-color: red;
border-bottom-width: var(--width);
border-right-color: red;
border-right-width: var(--width2);
border-bottom-right-radius: 25px;
}
.test:after {
content: "";
position: absolute;
height: 50px;
width: 25px;
right: -10px;
bottom: 29px;
transform: skewY(-45deg);
border: solid 0px transparent;
border-bottom-color: red;
border-bottom-width: var(--width2);
border-right-color: red;
border-right-width: var(--width);
border-bottom-right-radius: 25px;
}
<div class="test"></div>
I decided to go for the approach I have demonstrated in this pen - https://codepen.io/peteheaney/pen/bRBOMq (compiled CSS version below)
*, *::after, *::before {
font-family: sans-serif;
box-sizing: border-box;
}
.button {
background-image: none;
border-style: solid;
border-top-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-width: 0;
border-color: transparent;
cursor: pointer;
display: inline-block;
font-weight: bold;
margin-bottom: 0;
text-align: center;
text-decoration: none;
text-transform: uppercase;
touch-action: manipulation;
vertical-align: middle;
white-space: normal;
transition: all 0.2s;
}
.button:active, .button:hover, .button:focus {
text-decoration: none;
}
.button--large {
font-size: 15px;
padding: 16px 0 14px 21px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
position: relative;
margin-right: 21px;
}
.button--large:before {
content: "";
position: absolute;
left: 100%;
top: -2px;
width: 21px;
height: calc(100% - 17px);
border-top-right-radius: 6px;
}
.button--large:after {
position: absolute;
left: 100%;
bottom: -2px;
width: 21px;
height: 21px;
transition: all 0.2s;
}
.button--primary {
color: #000;
background-color: #FAB500;
border-color: #FAB500;
}
.button--primary:before {
background-color: #FAB500;
transition: all 0.2s;
}
.button--primary:active:before, .button--primary:hover:before, .button--primary:focus:before {
background-color: #f0ae00;
border-color: #f0ae00;
}
.button--primary:after {
content: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-primary-large.svg);
}
.button--primary:active, .button--primary:hover, .button--primary:focus {
background-color: #f0ae00;
border-color: #f0ae00;
}
.button--secondary {
color: #000;
border-color: #FAB500;
}
.button--secondary:before {
border: 2px solid #FAB500;
border-bottom: 0;
border-left: 0;
transition: all 0.2s;
}
.button--secondary:active:before, .button--secondary:hover:before, .button--secondary:focus:before {
background-color: #FAB500;
}
.button--secondary:after {
content: url(http://assets.peteheaney.com.s3.amazonaws.com/button-corner-secondary-large.svg);
}
.button--secondary:active, .button--secondary:hover, .button--secondary:focus {
background-color: #FAB500;
border-color: #FAB500;
}
<a class="button button--large button--primary" href="">My button</a>
<a class="button button--large button--secondary" href="">My other button</a>
Firstly, I divided the right-hand portion into top and bottom (using :before and :after). The top-right pseudo element just has a background color and a top right border radius. This way the top-right portion can have a flexible height, meaning the buttons don't need to have a fixed height. The bottom right pseudo element is essentially an SVG ( using content: url(/path/to/svg.svg) ). This pseudo element always has a fixed width and height, so it maintains its size and aspect ratio regardless of the width/height of the button.
The outline style button is just a variation on the other style, with more borders and less backgrounds.
The only downside to this approach is the need for a different SVG for each button style. But I'm happy with that compromise.
Another take on Arthur's approach.
If you create the bottom right image (the white corner and the yellow corner border) you are able to position this so it stays to the bottom right and you have the rest of the button to style yourself.
button {
background-image:url(corner.svg);
height: 20px;
padding: 5px;
border-radius: 5px;
background-color: yellow;
background-repeat: no-repeat;
background-position: bottom right;
}