Looking to create a box with a unique design element - specifically a diagonal line on the bottom right border as shown in the image below:
If anyone has a creative solution that does not involve using a background image, I would appreciate any suggestions!
Scenario 1 - link
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
padding: 20px 60px;
}
.btn,
.btn span{
width: 300px;
height: 100px;
display: inline-block;
position: relative;
color: #e74c3c;
font: bold 18px/100px'segoe ui';
text-transform: uppercase;
text-align: center;
text-decoration: none;
overflow: hidden;
padding: 2px;
}
.btn span {
width: 100%;
height: 100%;
}
.btn:before,
.btn span:before{
content:'';
position: absolute; right: -500%;
width: 1100%;
height: 1100%;
background: #c00;
z-index: -1;
}
.btn:hover span{
color: #000;
}
.btn:hover:before{
background: #000;
}
/* ----- btn-left-top ----- */
.btn-left-top:before,
.btn-left-top span:before{
top: 20px;
transform-origin: 46% top;
transform: rotate(-45deg);
}
.btn-left-top span:before{
top: 19px;
background: #fff;
}
/* ----- btn-left-bottom ----- */
.btn-left-bottom:before,
.btn-left-bottom span:before{
bottom: 20px;
transform-origin: 46% bottom;
transform: rotate(45deg);
}
.btn-left-bottom span:before{
bottom: 19px;
background: #fff;
}
/* ----- btn-right-top ----- */
.btn-right-top:before,
.btn-right-top span:before{
top: 20px;
transform-origin: 54% top;
transform: rotate(45deg);
}
.btn-right-top span:before{
top: 19px;
background: #fff;
}
/* ----- btn-right-bottom ----- */
.btn-right-bottom:before,
.btn-right-bottom span:before{
bottom: 20px;
transform-origin: 54% bottom;
transform: rotate(-45deg);
}
.btn-right-bottom span:before{
bottom: 19px;
background: #fff;
}<a href="#" class="btn btn-left-top">
<span>btn-left-top</span>
</a>
<a href="#" class="btn btn-right-top">
<span>btn-right-top</span>
</a>
<a href="#" class="btn btn-right-bottom">
<span>btn-right-bottom</span>
</a>
<a href="#" class="btn btn-left-bottom">
<span>btn-left-bottom</span>
</a>Scenario 2 - link
* {
margin: 0;
padding: 0;
}
body {
padding: 20px 60px;
}
.btn{
width: 300px;
height: 100px;
display: inline-block;
position: relative;
border: 4px solid #e74c3c;
color: #e74c3c;
font: bold 18px/100px 'segoe ui';
text-transform: uppercase;
text-align: center;
text-decoration: none;
}
.btn > span:before {
content: '';
position: absolute; bottom: 12px; right: 9px;
width: 66px;
height: 66px;
transform: rotate(45deg);
z-index: 1;
border-right: 4px solid #e74c3c;
}
.btn:before,
.btn:after{
content: '';
position: absolute; bottom: -4px; right: -4px;
}
.btn:before{
width: 47px;
height: 0;
border-bottom: 4px solid #fff;
}
.btn:after{
width: 0;
height: 47px;
border-right: 4px solid #fff;
}
.btn:hover{
border: 4px solid #4169E1;
color: #4169E1;
}
.btn:hover > span:before{
border-right: 4px solid #4169E1;
}<a href="#" class="btn">
<span>test</span>
</a>Take a look at this helpful resource by clicking here
HTML
<div class="blockHead">
<span class="blocktext">
XYZ Team
</span>
</div>
CSS
.blockHead:after {
color:#E84A47;
border-left: 30px solid;
border-top: 30px solid;
border-bottom: 30px solid transparent;
display: inline-block;
content: '';
position: absolute;
right: -30px;
}
.blockHead {
background-color:#E84A47;
/*width: 200px; */
height: 60px;
display: inline-block;
position: relative;
}
.blocktext{
color:white;
font-weight:bold;
padding:0px 60px 0px 20px;
font-family:Verdana;
font-size:12;
line-height:3;
}
<!-- 6장 연습문제 4 --> <html lang = "ko"> <head> <meta charset = "UTF-8"> <style> img{margin-left: auto; margin-right: auto; display: block;} .hyper{ text-decoration-line: ...
I'm attempting to incorporate a country code and phone number using Bootstrap v5 input group. Unfortunately, the code I'm using doesn't seem to be functioning correctly. I would like the format to be adjusted by changing the width. Is that ...
I am struggling with arranging two text boxes in a CSS flexbox. The left side contains a tagline while the right side has a brief summary. My goal is to have these boxes display side by side at the center of the webpage for desktop screens (min width 1024p ...
Struggling with CSS and jQuery Mobile here. I'm attempting to insert custom icons into buttons, but the code isn't cooperating. You can view the page at: Visit Website An interesting quirk - when you load the site in Firefox and click "Edit CSS ...
One common practice is to include the following script in the <head> section specifically for Internet Explorer 9. <!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> Wh ...
When comparing two images, both 512px in height and width, the plus symbol appears larger than the shutdown button. HTML: <div class="logout"> <a href="someLink"> <img name="logout" alt="logout& ...
Within Angular, a div element with the class "container" is automatically created and inserted into my component's HTML. Is there a way to modify this class to "container-fluid"? I understand that Angular utilizes encapsulation, but I am unsure of how ...
Is there a way to change the color of multiple adjacent cells when hovering over one cell, and can this be done dynamically (so the number of adjacent cells that change color can vary)? Here is the code snippet: I'm using React to create a table wit ...
I am currently using Cloudinary to serve correctly sized images, however, it appears that NextJS image is always fetching with a width of 3840, instead of the fixed value. <Image src={loaderUrl(logoImage)} alt="" role="presen ...
I am facing an issue where I am unable to change the x and y variables of Svg text tags using CSS. This should work as it does with Svg and . However, I am only able to make changes if I directly add the x and y positions in the HTML code. Html: <svg ...
Upon clicking the button to add a new section, the section gets added successfully. However, the navbar does not get updated as expected. It should dynamically update the navbar to display both the existing sections and the new section added using JavaScri ...
Currently, I am facing a challenge with resizing a div with the id="test". My goal is to adjust the size of the div based on the height of the browser window subtracting 80px so that the element fits perfectly within the visible space without req ...
Quoting from msdn: "The object is placed relative to the position of its parent element—or to the body element if the parent element is not positioned" Let's consider a scenario where I set a div with specific dimensions to have a bottom value ...
When resizing a browser, the input fields do not resize properly and end up overlapping each other in the middle, causing distortion before the media script adjusts everything to 100%. The width of the text area set to 100% does not align with the forms. F ...
I'm currently using an asp.net menu control created from codebehind for a better user experience. However, when the browser is resized or the resolution is lower than intended, items that don't fit get pushed down to a second line. I want to hide ...
Among the various types of HTML elements, inline and inline-block elements have their differences. One such difference is that inline elements don't support margin-top or margin-bottom properties like inline-block elements do. However, in a specific e ...
Utilizing jQuery, I am dynamically generating a div that includes add and close buttons. Bootstrap tooltips are applied to these buttons for additional functionality. However, a problem arises where the tooltip for the first add button remains visible even ...
I'm trying to center a button with text using Cuffon for the font, but I can't get it to align vertically and horizontally. The text-align property is working fine, but vertical align isn't. Here's the code for my div block: btndownlo ...
Having two top navbars on a single page can be tricky. One is fixed in its position, while the other is sticky. But when scrolling down, the sticky navbar fails to stay on top of the fixed one: https://i.sstatic.net/4mUAZ.png Furthermore, as you scroll d ...
https://i.sstatic.net/c5xyr.png Is there a way to make the text fall underneath the image? I am familiar with using display: inline-block and float:left or float:right, but I am new to using flexbox. Can someone with more expertise help me solve this issu ...