https://i.sstatic.net/OsDsg.png
Hey there everyone, I'm curious if it's achievable to create borders like these using only CSS, without relying on a set image. If anyone has insight on how this can be accomplished, please share your knowledge.
I intend to apply this style to both small and large blocks, so it must be achieved through CSS. Thanks in advance!
If you wish to achieve a specific shape for your elements, consider utilizing
clip-path: polygon (x y, x y, ...)% or px, making it convenient for adjusting width and height with variables. Below is the code snippet I have developed based on my previous solution shared in this stackoverflow post.
UPDATE: The latest version of the code now caters to image responsiveness! To explain further, a div styled with positional properties such as left, right, top, and bottom is placed around the image, slightly larger than the image size itself. This setup requires a container with a relative position. Moreover, by using the class my-polygon to define the shape in percentages, any potential issues are eliminated.
:root {
--cut-corner-size: 10px;
--cut-corner-border: 5px;
}
.my-polygon {
clip-path: polygon(
calc(var(--cut-corner-size) * 2) 0,
calc(100% - var(--cut-corner-size) * 2) 0,
// Remaining CSS code truncated for brevity
);
padding: 0;
border: 0;
margin: 0;
}
.relative-container {
position: relative;
display: inline-block;
}
.border-container {
position: absolute;
left: calc(-1 * var(--cut-corner-border));
top: calc(-1 * var(--cut-corner-border));
bottom: calc(-1 * var(--cut-corner-border));
right: calc(-1 * var(--cut-corner-border));
background-color: green;
}
img {
display: block;
}<div class="relative-container">
<div class="border-container my-polygon">
</div>
<img src="https://picsum.photos/300/150" class="my-polygon">
</div>
<div class="relative-container">
<div class="border-container my-polygon">
</div>
<img src="https://picsum.photos/150/150" class="my-polygon">
</div>Currently, I am in the process of enhancing a webpage that contains a significant amount of old legacy code. One issue I have encountered pertains to text wrapping within a fixed-height and width container, as illustrated in the image below: https://i.sst ...
Struggling to vertically align the text in media-body to the middle when using the new Bootstrap 4 beta version. Tried an approach mentioned in this solution, but it didn't work with the latest version of Bootstrap. Attempted using text-center and a ...
Struggling to place a loading element between the top toolbar and bottom tabs on various iPhone models and iOS versions. The challenge arises with iOS 10. Using "margin-top" causes errors, while "padding-top" doesn't work on iPhone X. Is there a CSS s ...
Looking to generate a div with a custom size and then place something on top of it. How can I accurately position and resize the overlay to match the underlying div using CSS? ...
Encountering CSS margin issues when adding new divs. Desiring a large margin between the Create Div button and minimal margin between Example Text Here. The desired outcome Margin is too small between Create Div button and Example Text Here, but good bet ...
I'm currently working on creating a sprite image for the bottom links on our media page, but I seem to be having trouble getting the image to crop correctly. Can anyone point out where I may be making a mistake? CSS .footer{ position:absolute; ...
After successfully programming a website with the FullPage Slider from this source, everything was working fine except in Firefox. Specifically, one section containing a table with image overlay hover effects from these effects library was not functioning ...
As a novice in HTML and jQuery, I am currently working on creating a portfolio site for a school project. One of the challenges I have encountered is designing a graphic that includes a text box within a resizable div element. My goal is to prevent excessi ...
I attempted to integrate a jQuery plugin into my application, but it doesn't seem to be working. In the head section of my code, I have included: <link rel="stylesheet" media="screen" type="text/css" href="./style/colorpicker.css" /> <script ...
I am currently attempting to create a square consisting of 4 smaller squares inside, but I have been facing challenges with the method I was using. Here is the code snippet: #grandbox { position: absolute; width: 204px; height: 204px; border: so ...
I have noticed a section overlapping issue and I am struggling to figure out the cause. I have attempted using margins and padding to adjust the footer with my .div-wrap, but so far it has not been effective. After searching around, I am still uncertain ...
Trying to vertically center a div inside an image element has been challenging. While there are many ways to achieve vertical centering in general, this specific case presents unique difficulties. To accomplish this, the following minimum code is needed: ...
I'm having trouble with scroll bars appearing in my iframe when inside a fancy box. I have tried everything to remove them without success. For example, you can view the issue here: http://jsfiddle.net/t4j3C/ No matter what I try, nothing seems to w ...
Utilizing flex to centrally position my element within my layers has worked well for me, but I encountered an issue when switching to a smaller screen size. The element simply scales down in size instead of taking up the full width like it does with Bootst ...
Initially, I had posted this inquiry before, and my apologies for reposting. However, I am still struggling to comprehend why the code works for the individual who responded but not for me. How can one retrieve values from search suggestions after enterin ...
After incorporating accordions into my site, I encountered a peculiar issue (as shown in this video): when I open one accordion, the adjacent accordion also opens unexpectedly. Similarly, closing one accordion causes its neighboring accordion to mysterious ...
Looking to set a maximum length for ellipsis on multiline text using CSS, I tried the following: .body { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } However, this approach did not work. Interesti ...
When using Express with EJS, my base route is set as follows: router.get("/", productsData.getProducts); The "productsData" is sourced from my controllers page and the code snippet within that page is as follows: exports.getProducts = (req, res, next) => ...
Hey there, I'm currently working on a WordPress blog and facing an issue. Here's the link to my problem: When I resize the browser (X-Axis) to a minimum, like when using a mobile device, I noticed that I can scroll to the right in the Content se ...
When using Material UI's MUI library for React, I encountered an issue with the checkbox checkmark color. By default, the checkmark takes on the background color of the container element, which is great for light backgrounds but not ideal for dark one ...