As I work with a div that has a basic border design:
border: 10px solid #642850;
div {
border: 10px solid #642850;
height: 100px;
width: 100px;
}<div></div>I aim to create a unique shape like the one shown above:
Do you have any recommendations for achieving this effect?
Check out this code snippet: http://jsfiddle.net/sachinkk/L5zz1hak/2/
.sq {
border: 10px solid #642850;
height: 100px;
width: 100px;
position: relative;
margin-top: 100px;
}
.tl {
position: absolute;
top: -33px;
left: -36px;
border-left: 10px solid #642850;
border-top: 10px solid #642850;
height: 76px;
width: 76px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform-origin: 100% 100%;
}<div class="sq">
<div class="tl"></div>
</div>One way to achieve the desired shape is by using a pseudo-element along with CSS transforms.
div {
background: white;
border: 10px solid #642850;
width: 100px;
height: 100px;
margin-top: 75px;
positioN: relative;
}
div::before {
margin-top: -52px;
border: 10px solid #642850;
background: white;
content: '';
transform: rotate(45deg);
position: absolute;
top: 0;
left: 8px;
height: 64px;
width: 64px;
z-index: -2;
}<div></div>Another option is to use SVG, which can create the desired shape in a responsive and browser-friendly manner.
<svg width="50%" viewbox="0 0 100 100">
<polygon points="2,25 2,98 98,98 98,25 50,2z" fill="white" stroke-width="2" stroke="#642850"></polygon>
<polyline points="2,25 98,25" stroke="#642850" stroke-width="2"></polyline>
</svg>Check out this code snippet
.b{
width:200px;
height:100px;
overflow:hidden;
}
.b div{
width:200px;
height:200px;
transform:rotate(45deg);
content:"";
border:10px solid red;
margin-top:40px;
margin-left:-10px;
}
.a{
width:180px;
height:200px;
border:10px solid red;
margin-top:0px;
}<div class="b"><div></div></div>
<div class="a"></div>By utilizing a single div and incorporating generated content:
div {width:100px; height:100px; border:5px solid red; position:relative; margin-top:50px}
div:after,div:before {content:""; position:absolute; border:55px solid red; border-color:transparent transparent red transparent; border-width:40px 55px; bottom:105px; left:-5px}
div:after {border-color:transparent transparent white transparent; border-width:34px 48px; left:2px}<div></div>Give this solution a try:
.roof {
position: absolute;
top: calc(499px - 48px);
left: 899px;
height: 0;
width: 0;
border-left: 120px solid #f00;
border-top: 120px solid transparent;
transform: rotate(135deg);
}
.roofCovering {
position: absolute;
top: calc(499px - 48px + 5px);
left: 909px;
height: 0;
width: 0;
border-left: 100px solid #fff;
border-top: 100px solid transparent;
transform: rotate(135deg);
}
.house {
position: absolute;
top: calc(499px - 48px + 58px);
left: 874px;
height: 165px;
width: 160px;
border: 5px solid #f00;
}<div class="roof"></div>
<div class="roofCovering"></div>
<div class="house"></div>When I click on "in", I am looking to retrieve the value of "out". This can be easily understood by referring to the image below: The timesheet displayed is generated using an array. All the data is stored in the array and needs to be presented in a table ...
Having some trouble with CSS animations on mobile devices. The animation works perfectly fine on desktop, but on mobile, it seems to display the final 100% keyframe first before animating from 0%. I've tried adding the initial style directly to the cl ...
It's important to clarify that I am familiar with setting the startDate. My current challenge lies in trying to gray out dates prior to the selected startDate and also changing the cursor on the datepicker to a pointer. Despite hearing that bootstrap ...
There is quite a bit of code in this one, so I've decided to showcase it in a codepen. https://codepen.io/anon/pen/WMyQEJ Essentially, I'm utilizing @media queries to expand the #about div in order to accommodate my content that spills over into ...
I created an HTML list and wanted to use ballot boxes with check marks instead of default bullets, so I incorporated some CSS: ul { list-style: none; } li::before { content: "\2611"; } <ul> <li>Long text</li> <li>Lon ...
I have a main div containing multiple smaller square divs, set up like this: <div class="container"> <div class="little-square"></div> <div class="little-square"></div> <div class="little-square"></div&g ...
In my application, I have a form displayed in one tab and a list of submitted applications in another tab. When the user clicks on the "edit" button on a form, the data should be loaded from the database and the user should be taken to the other tab. Altho ...
For instance, I would like the following codes .x {color: blue; background: red} .y {color: purple; background: yellow} .z {color: blue; border: gold} .w {align: left; abc: gold} to transform into an array similar to this var styles = [ ".x {color: ...
Having some trouble with the vertical alignment of navigation menu icons in Safari and Firefox. Any suggestions on how to fix this issue? HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra ...
If you want to view the Fiddle Here Essentially, it's a text-highlighting tool that works almost flawlessly. The problem arises when it encounters tags like <p> or <br> within the selection. The JavaScript code seems to automatically in ...
Looking for some assistance here. I've double-checked the SQL table names multiple times, but whenever I try to post, I keep getting an error. I'm fairly new to this, so any help would be greatly appreciated. Thanks in advance. require_once(&ap ...
Currently, I am working on a front-end project which involves HTML, JavaScript, and AngularJS. In this project, I have a single index page where every other HTML file is loaded within a div tag when the hash changes. <div ng-app="mainApp"> & ...
I am working with two tables that require the capability to dynamically add and delete rows using separate scripts. How can I modify the second script so that it only affects the second table and not the first one? Table: <table id="myTable" class=" t ...
Whenever I enter a URL into a text input and press enter, my objective is to have the URL open in an iframe. However, some websites produce an error when trying to do so. Is there a method to successfully display a web page in an iframe? Error message: Th ...
On my website, I have implemented two menus - one to be displayed when the page loads and another to show up when a scroll occurs. You can view my page here. The goal is to have the white part visible when the position is at the top, and switch to the blu ...
I'm currently working with a bootstrap 4 accordion and I have been attempting to include an additional icon alongside the default arrow up/down icon. Although I tried nesting both icons inside a row, I still can't seem to figure out how to align ...
How can I make a <textarea> occupy all available space within a <td> element? Upon clicking inside the table cell, the <textarea> should display with precisely the same dimensions as the cell itself, resembling an Excel spreadsheet. I h ...
I need to prevent a form submission based on the result of an ajax request... Here is the code I attempted to implement: The chreg() function is supposed to return a boolean value from the ajax request, but it's not working! Javascript: function ch ...
Can anyone help me with populating parts of my form from data in an array retrieved from the database? Specifically, I need assistance with setting up a <select> element. The value for each option should come from the database column estimate_lead_i ...
My current issue involves trying to obtain the font size of an element in the following manner: getComputedStyle(MyTargetElement , "").getPropertyValue('font-size') The result is coming back as 16px, when it should actually be 14px. W ...