Is there a way to achieve this design using only CSS? I've been looking for a solution but couldn't find one. Any suggestions?
:before = "content", as it's not considered pure CSS.Check out this cool method using CSS lines:
.container {
display: inline-block;
position: relative;
padding: 1rem 5rem;
border: 2px solid black;
margin: 2rem 5rem;
color: black;
font-family: Arial;
font-weight: normal;
cursor: pointer;
}
.container > span {
content: '';
position: absolute;
height: 25%;
left: 0;
top: 0;
width: 100%;
}
.container > span:nth-child(2) {
top: 50%;
}
.container > span:nth-child(3) {
top: 100%;
}
.container > span:nth-child(3):after {
display: none;
}
.container > span:before,
.container > span:after {
content: '';
position: absolute;
width: 2rem;
height: 2px;
background: black;
border-radius: 2px;
right: 100%;
top: -1px;
transform: rotate(45deg);
transform-origin: 100% 0%;
transition: transform 200ms ease-in-out;
}
.container > span:after {
top: 100%;
}
.container:hover > span:before,
.container:hover > span:after {
transform: rotate(0deg);
}<div class="container">
Line
<span></span>
<span></span>
<span></span>
</div>Check out this method that utilizes gradients:
button {
border: 1px solid grey;
background: white;
font-size: 16px;
padding: 5px 20px;
min-width: 100px;
margin: 40px;
position: relative;
}
button:before {
content: '';
position: absolute;
width: 15px;
height: 90%;
top: 0;
left: -15px;
background-image: linear-gradient(180deg, transparent 35.71%, grey 35.71%, grey 50%, transparent 50%, transparent 85.71%, grey 85.71%, grey 100%);
background-size: 14.00px 14.00px;
transform: skewY(15deg);
background-position: bottom;
}<button>Solid</button>My original idea to achieve this effect involves using clip-path to shape the element and create a border-like appearance. To accomplish this, I would utilize a parent container for the actual button element. The shape generation process can be done using the following tool:
Shape Generator
While this approach may require additional styling for active and hover states to enhance the visual appeal, it offers a viable method to attain the desired result.
.button {
color: black;
width: 300px;
height: 90px;
/*Custom Shape*/
clip-path: polygon(15% 8%, 100% 8%, 100% 100%, 15% 100%, 15% 9%, 6% 1%, 6% 0);
/*Background color when transparent*/
background-color: white;
/*Remove default border*/
border: none;
/*Adjust text alignment due to clipped portion*/
padding-left: 15%;
z-index: 2;
}
.fake-border {
/*Center button within the div for uniform appearance of fake border*/
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
/*Ensure button is in front*/
z-index: 1;
/*Slightly larger dimensions than actual button*/
width: 302px;
height: 92px;
/*Same custom Shape!*/
clip-path: polygon(15% 8%, 100% 8%, 100% 100%, 15% 100%, 15% 9%, 6% 1%, 6% 0);
/*Desired border color*/
background-color: grey;
}<div class="fake-border"><button>YourTextHere</button></div>I'm currently experiencing an issue with my email template CSS while using Gmail and Chrome Dev Tools in responsive mode (382x661). Within the header, I have included: <meta name="viewport" content="width=device-width, height=device-height, init ...
Despite the abundance of answers to similar questions, my lack of JS skills hinders me from implementing them in my specific case. On my WordPress site, I have a script that changes the navigation bar's color when scrolling down to the #startchange CS ...
Check out this example http://jsbin.com/oqisuv/ CSS body { background:#e7ebf2 url(http://i.imgur.com/R2VB6.png) center repeat-y; } .menu { width:989px; margin:auto; height:100px; background:#666666; line-height:100px; text-ali ...
In the process of creating an Apache Cordova app using the Ionic framework and working with Phonegap Build, I encountered a challenge. The main page of my app features rows of icons that appear like this: https://i.sstatic.net/7LE7r.png However, there is ...
Looking to organize all the CSS code on my website in a specific manner. I want to define the type with details such as size, weight, and color. For example: <h1 bold blue>Hello world</h1 blue bold> So essentially, the CSS file will include: ...
On larger screens, I am trying to align text vertically next to an image. Below is the code and attached image for reference: <div class="container-fluid"> <?php add_revslider('homepage'); ?> <div id="front-page-1&q ...
In my model, I have an array of images' URLs of varying lengths. I want to display 2 images per row on my page, resulting in the following layout: <div class="row"> <div class="col"> <img ... /> </div& ...
I found myself in a confusing situation where using :last-child is affecting how parent classes are being applied. The task at hand is to style the last element in a list of elements. However, upon using :last-child, the priority of styles shifts and one ...
The element top_fixed_right:hover on my homepage is functioning perfectly. However, on a different page, the same div only responds to the :hover state when forced using Chrome's developer tools. Normal mouse hovering does not trigger it. I tried op ...
After researching and modifying a show/hide jQuery code I discovered, everything is functioning correctly except for the HTML img attribute not being replaced when clicked on. The jQuery code I am using: <script> $(document).ready(function() { ...
I'm currently working on a little exercise that requires me to replicate this However, I'm facing some difficulty aligning the bullets as shown in the reference. My content is aligned but not the bullets. Here's the link This is my HTML: ...
I am in the process of developing a website using flexbox, and one key aspect of the design is to hide the navigation bar, specifically the left panel in this JSFiddle, when the viewport width is between 480px and 1023px. The current implementation achieve ...
I've been working on a form where the user can fill in an input and press enter to move to the next field. Although I have managed to get the functionality to show the next div, I am facing issues with validation... // Moving to next div on Enter ...
After creating a navbar using regular CSS3, I incorporated input fields and buttons from angular material. However, my sticky navbar is being obscured by the components created with angular material. Here is the CSS for the navbar: position: sticky; top: ...
After meticulously configuring a basic grid of divs using float, I've encountered an issue. When expanding an item in the right-hand column, the layout shifts awkwardly. My goal is to have boxes A and B seamlessly move up to fill the empty space, whi ...
click here for imageI am trying to interact with the "바카라 멀티플레이" button located at the center of the website. Even after switching into an iframe, I am unable to detect the button. How can I achieve this? from selenium import webdriver im ...
I have a card element with a title and subtitle, and I want to add a black bar above the header. <ion-list> <ion-card (click)="onEventClick(event.id)" *ngFor="let event of events"> <ion-card-header> ...
I am looking to scale some text and position it over an image on mobile devices. <style> #rcontainer { height: 340px; width: 100%; position: relative; } .rtext span { position: absolute; bottom: 130px; font-family: "Geo ...
For the movie website I'm building, I'm trying to implement a dynamic tab feature using PHP and MySQL within the Bootstrap Framework. The goal is to categorize movies as "Now Showing" or "Coming Soon." Desired Outcome: Movies should be displayed ...
I'm trying to set up a sidebar in Bootstrap that overlaps with a column. The goal is for the sidebar to appear when a button is clicked and disappear when the close button x is clicked. Despite using a Bootstrap row and column layout, I encountered is ...