Looking to create a text container with an unconventional border style like in this image: https://i.sstatic.net/qo9CL.png
The irregular borders are throwing me off, especially considering the text inside and the need for responsive design. Any suggestions on how I can achieve this effect?
If anyone has any hints or tips on creating this type of container, please point me in the right direction!
Consider utilizing a border image for your borders. One option is to leverage the border-image-generator to easily generate the necessary CSS code. Keep in mind that the result may not be perfect if the box size exceeds the image dimensions and the image lacks repeatable sections.
Another approach is to employ an SVG as either the background image or the container itself. Since SVG is vector-based, it can stretch accordingly, allowing you to customize the path to suit your requirements.
User border-image
VIEW DEMO
border-style: solid;
border-width: 27px;
-moz-border-image: url(https://i.sstatic.net/qo9CL.png) 27;
-webkit-border-image: url(https://i.sstatic.net/qo9CL.png) 27;
-o-border-image: url(https://i.sstatic.net/qo9CL.png) 27;
border-image: url(https://i.sstatic.net/qo9CL.png) 27 fill;
To achieve a similar effect, you can utilize HTML and CSS border properties creatively.
.border-surround {
overflow: hidden;
}
.custom-border {
border: 4px solid #B9C464;
background: #DCE2B4;
transform: rotate(0.5deg);
}
.wavy-border {
border: 1px dashed #B9C464;
transform: rotate(-0.5deg);
height: 100%;
width: 100%;
padding: 5px;
box-sizing: border-box;
}
.elem-one {
height: 50px;
width: 400px;
color: #fff;
}<div class="border-surround">
<div class="custom-border elem-one">
<div class="wavy-border">Your Content Here</div>
</div>
</div>I am working with a grid component from Material UI: Item element const Item = styled(Paper)(({theme}) => ({ ...theme.typography.body2, padding: theme.spacing(2), textAlign: 'center', color: "black", })); Structure ...
Is it possible to embed a link to a website in WordPress that is responsive to different devices, such as desktops and phones with varying screen sizes? On desktops, it looks fine, but on phones, it gets cut off and does not adjust accordingly. Using padd ...
I'm facing some challenges with properly centering my website It appears to be centered when I zoom out. However, for users who don't zoom out, it looks misplaced. Do you have any suggestions? The site was built using all AP divs and even with a ...
I am looking to create buttons that will increase the value of both the first and second range by 1 when pressed, as well as decrease the value of both ranges by 1 when pressed. Here is my code: function run(){ var one = document.getElementById("rang ...
current result: https://i.sstatic.net/eXLPv.png desired output: https://i.sstatic.net/vgl6z.png I am aiming to center the text. add image description here add image description here ...
Can anyone assist me with minifying my css in this gulpfile.js for compiling css? I have tried multiple code snippets from the internet but none of them seem to work. Your help would be greatly appreciated. Thank you. var gulp = require('gulp&apo ...
In this scenario, the toggle for the menu is controlled by a checkbox with the id "check" below. I attempted to bind v-bind:class="[{'antiscroll': checkboxValue}]" to the body in HTML, and also in the main App.vue file, but it did not work as exp ...
I've come across various Style Guides that discuss declaration and attribute ordering, but surprisingly none that specifically address class ordering. For instance, one developer's code looks like this: <div class="btn btn-primary btn-lg mt- ...
Looking for a way to adjust the opacity of a div's background? This is easily done in modern browsers such as Chrome and Firefox using rgba. However, I'm facing difficulties with IE7. The "filter: alpha(opacity=50);" property doesn't work f ...
I am looking to include a series of tweets from Twitter in a div on a basic webpage. The challenge is centering this div horizontally on the page. I have tried using: <div style="text-align:center"> and also: <div style="width: 900px; display ...
I am attempting to design a drop-down navigation bar with 2 rows. Initially, only 1 row is visible. Upon clicking the visible row, both rows should appear. Subsequently, when one of the 2 rows is clicked, only that specific row should be displayed. Below a ...
I need assistance with adding a transition time to my JavaScript toggle class function. I had previously coded it but have now forgotten how to do so. Any guidance would be highly appreciated. <!DOCTYPE html> <html> <head> <style typ ...
Currently tackling a project that involves JavaScript and I've hit a roadblock. Before you dive into the text, take a look at the image. Check out the picture here. I have successfully created a slider, but now I want to implement a feature where cli ...
Struggling with the challenge of absolute and relative positioning in CSS. My GUI allows users to view folders and select how many columns they appear in, as shown in the images provided. Beneath each folder is an input field for renaming and a clear butto ...
As I work on building my portfolio from scratch, one challenge I am facing is how to include high-quality images without sacrificing site speed or image resolution. I used Figma to create wireframes, but when I exported the images, I noticed a significant ...
I have a label that looks like this: https://i.sstatic.net/q0DaR.png Is there a way to position 'Lorem ipsum' perfectly in the center between 'dolor' and 'amet'? https://i.sstatic.net/aJapG.png - reference image T ...
My goal is to design a form that includes three "Likert Scale" input fields. Each of these three inputs will have a total of 10 points that can be distributed among them. The submit button should become enabled when the score reaches 0, allowing users to s ...
I created a progress bar using conic-gradient, but I'm having trouble with the sharpness of its edges. I've looked for solutions online, but nothing has worked so far. You can view the entire progress bar here. background-image: conic-gradient( ...
My element's width changes under different conditions, and I've implemented CSS with a transition for the width: .element-class { transition: width 500ms ease 0ms; } However, I only want the transition to occur when the width is decreasing. ...
I've encountered an issue with the mobile version of my website. When users scroll to view content, clicking on an icon triggers a slide-in navigation bar from the left side and sets the body to have overflow: hidden;, effectively preventing further s ...