I'm trying to create a border that includes a kite-shaped square in the middle. Something similar to this concept:
https://i.sstatic.net/vmCC2.png
However, I don't want to use an image border because when the div is stretched, the "kite" shape gets distorted as well. I want the size of the kite itself to remain fixed (for example, 10px from left edge to right) while the rest of the border remains a straight line.
Appreciate any help or suggestions!
To accomplish this effect using CSS, you can utilize the transform property along with the :before pseudo-element. Here is an example:
div {
position: relative;
border: 1px solid #FF0000;
top: 100px;
}
div:before {
content: "";
width: 10px;
height: 10px;
background: #FF0000;
position: absolute;
transform: rotate(45deg);
left: 50%;
margin-left: -5px;
transform-origin: 100% 0%;
}<div></div>Here is a simple HTML and CSS code snippet to create a kite separator:
<div class="kite-separator">
<span class="kite-center"></span>
</div>
The CSS styling for the separator and center of the kite is as follows:
.kite-separator {
width: 100%;
height: 2px;
background-color:#cb0009;
position:relative;
}
.kite-center {
display: block;
width: 8px;
height: 8px;
background-color: #cb0009;
position: absolute;
left: 50%;
top: -3px;
margin-left: -4px;
transform: rotate(45deg);
}
You can see it in action by checking out the working example on this link.
In the case that you only require a single square, my suggestion would be to utilize the pseudo element ::after in this manner: https://jsfiddle.net/6fLuagsv/
.class-with-border{
position: relative;
box-sizing: border-box;
height: 100px;
border: 3px solid #c00;
width: 100px;
}
.class-with-border::after{
content: '';
position: absolute;
bottom: -8px;
left: 50%;
width: 8px;
height: 8px;
border-radius: 1px;
background-color: #c00;
transform: rotate(45deg) translateX(-50%);
}
For situations where you need a square on each side, you can simply add four elements within the container and adjust them according to your requirements.
Is there a way to determine the max-width of an element in CSS based on the viewport width and the position of the element? I have a div that holds a table with variable column widths, so the size can change depending on the data. I want to set a maximum ...
I am facing a challenge with my button that has a box-shadow effect on hover. Currently, I am unsure how to adjust the width of the box-shadow effect. Here is a snapshot of my button's current appearance: https://i.stack.imgur.com/Mg0df.png</p&g ...
I am currently facing an issue with attaching VKI (Virtual Keyboard Interface) to an element that is dynamically added to the DOM using JavaScript. The scenario involves a table with initially only one row, along with "Add Row" and "Delete Row" functionali ...
I need help positioning container 2 statically below container 1. The navigation bar is fixed, so it will be outside the flow of the page while container 1 is relative and will appear on top as if the navigation doesn't exist in the flow. However, whe ...
I am attempting to dynamically send array data to draw a chart. My goal is to receive input values [x and y] from the user using HTML. I have been successful in retrieving the data from HTML, but when I pass it to the chart, the format is not being recog ...
I am brand new to Angular. I need to design something like this: https://i.sstatic.net/Zcb9i.png However, I'm struggling to find the right solution. Here is what I have so far: https://i.sstatic.net/7hsrk.png. Having been a backend developer, I&ap ...
Recently, Chrome introduced support for the loading attribute, but I am experiencing issues with it. The image is loading even when it's not in the viewport. Here is my network info in DevTools User-agent: Chrome/75.0.3770.80 I have enabled la ...
Looking for a navigation sidebar design similar to Outlook for my web application. I have seen options available as Winform controls and through Visual WebGUI, but these are Microsoft-dependent solutions. We need a Javascript & CSS based solution that is s ...
I am currently in the process of learning web development languages, and I'm attempting to create a dropdown list using JavaScript (I previously tried in CSS without success). I would greatly appreciate it if you could review my code and let me know ...
Consider this scenario: We are tasked with fetching an image from an S3 bucket. <img src="https://s3-us-west-2.amazonaws.com/{BUCKET}/logo.png" /> Due to limited internet connectivity, I must find a way within my Express server to redirect requests ...
I am currently utilizing Bootstrap 4 (jQuery is also installed) to develop an accordion feature in combination with Vue.js The challenge I am facing is related to using the v-for directive on the card I intend to replicate for each item in a JSON file. Th ...
According to the Shiny site, it is recommended that before making changes to the DOM, such as adding or removing inputs and outputs, you should inform Shiny by using unbindAll and bindAll: function modifyDom() { Shiny.unbindAll() insertI ...
Is there a way to display long string data from a JSON file in a list format when the description string is too lengthy? How can I split or format the description using React and TypeScript? The JSON data I have is as follows: "options": [ ...
I'm looking to extract the contextual information surrounding a selected text on a web page, specifically the 25 words before and after it. I've tried using JavaScript and jQuery with the following code snippet but unfortunately, it doesn't ...
I am currently learning how to use material ui. My goal is to customize the loading bar's CSS. I checked the documentation and utilized colorPrimary classes. However, the changes are not appearing as expected. Could you please guide me on how to resol ...
Is there a way to make two divs span the full width of the page while being divided in half by a diagonal line using CSS? I am working on a slider and once completed, I need to add content to both parts. Any ideas on how to accomplish this with two divs? ...
I have a page VIEW-SALE.PHP that includes a submit button form to view the invoice in print format. Here is the code snippet: <span style='display:inline-block'> <form name='print' id='print' action='pr ...
As a newcomer to the world of jQuery and Visual Studio Environment, I embarked on the journey of creating a circular navigation menu bar following the instructions provided in this link. Despite my efforts, I encountered a hurdle in the head section where ...
Well, I've encountered quite the puzzling issue with a project I'm working on (it could even make it to the Daily WTF), and I'm hoping for some help in finding a solution. (Apologies in advance for the lengthy explanation...) About a month ...
If you're looking to add striped rows to tables using Bootstrap, check out this link. Simply adding a specific class to the HTML table element should do the trick: <table class="table table-striped"> ... </table> But what if y ...