Create angled corners enclosed by a trim

I'm looking to create an HTML shape with cutoff corners and a border around it.

Currently, I can create cutoff shapes without borders using the following code:

HTML:

<div class="cut-off"></div>

CSS:

 .cut-off{
   position:relative;
   top:400px;
   left:400px;
   height:155px;
   width:200px;
   background:red;
}
.cut-off:after{
   position:absolute;
   bottom:0px; right:-20px;
   content:".";
   text-indent:-999px; overflow:hidden;
   display:block;
   width:0px; height:0px;
   border-top: 20px solid green;
   border-right: 20px solid transparent;
}
.cut-off:before{
   position:absolute;
   top:0; right:-20px;
   content:"#";
   text-indent:-999px; overflow:hidden;
   display:block;
   background:blue;
   width:20px; height:135px;
}

Check out the Jfiddle here

Now, I want to add a border that goes around the shape. How can this be achieved?

The desired shape should look something like this:

(Image of shape)

Filled with a color.

htmlcssshapescss-shapes

Answer №1

To achieve a cool cutoff effect, you can tweak your html structure slightly like demonstrated in this

<div class="cut-off"></div>
<div class="cut-off2"></div>​


.cut-off{
position: relative;
width: 300px;
height: 150px;
border-bottom: 80px red solid;
border-right: 80px transparent solid;
}

.cut-off2{
position: absolute;
z-index: -1;
top:0;
left: 0;
width: 305px;
height: 150px;
border-bottom: 82px blue solid;
border-right: 80px transparent solid;
}

p{
position: absolute;
left: 0;
bottom:-40px;

}

​

This method involves adding an additional div beneath the original one and manipulating border dimensions for the desired effect.

UPDATE: I've also included a way to insert content within this visually appealing area.

Answer №2

Check this out:

<div class="clipped">text</div>​​​​​​​​​
.clipped{
   position:relative;
   height:155px;
   width:200px;
   background:red;
}
.clipped:after{
   position:absolute;
   bottom:0px; right:-20px;
   content:".";
   text-indent:-999px; overflow:hidden;
   display:block;
   width:0px; height:0px;
   border-top: 20px solid green;
   border-right: 20px solid transparent;
}
.clipped:before{
   position:absolute;
   top:0; right:-20px;
   content:"#";
   text-indent:-999px; overflow:hidden;
   display:block;
   background:blue;
   width:20px; height:135px;
}

By the way, I came across this code snippet on the following website (so credit goes to them):

Answer №3

It's not entirely clear if this is the exact solution you're seeking, but one possible approach could be utilizing the CSS3 border-radius property to achieve the desired effect. It may be worth exploring further. You might want to experiment with something along these lines:

<div class="trimmed">
    <p class="content">Sample text</p>
</div>

.trimmed{
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid #7A7764;
    border-radius: 0 75px 0 0;
}

.content {
    margin: 15px;
}

​

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering challenges with web scraping certain data that is not being captured after a line break tag using Python's

I've been attempting to scrape a public web directory in order to retrieve contact information for companies. While my code is functioning properly, it seems to be having trouble extracting information that comes after the br tag. For example, it fai ...

pythonhtmlpandasweb-scrapingbeautifulsoup

Ensure that the floated element stretches to 100% height in order to completely fill the page

I'm working on achieving a height of 100% for the left sidebar so that it fills the page regardless of the size of the "main" div. Currently, it stops at the normal page height and doesn't expand further. Is there any way to make this work as i ...

javascriptjqueryhtmlcssheight

Grid X Transformation 3: Dynamically alter grid cell background based on value (no need for CSS classes)

While working with GXT2, it was possible to dynamically change a cell's background color using the GridCellRenderer's render method. However, in GXT3, this feature no longer exists. The suggested approach is to utilize a GridViewConfig and overri ...

cssgxt

Is there a way for me to choose multiple checkboxes simultaneously?

I have a dynamically created HTML table with checkboxes added for each row. $.each(data, function(id, value) { rows.push('<tr><td><input type="checkbox" autocomplete="off" class="chkbox" name="chkbox" value="'+value.site+' ...

javascriptjqueryhtml

What is the process for styling the <HTML> element effectively?

Query: How can I implement this style using JavaScript? jQuery would be appreciated as well :) Note: This style should be applied to the <HTML> element, not the document.body element. Otherwise, it will not work correctly. <style type="t ...

javascriptjquerycssxhtmlscrollbar

Limit the rotation of jQuery and CSS3 elements to always turn in a clockwise direction

Utilizing the jQuery transit plugin, I am rotating a block element with 4 navigation controls. Each time a nav item is clicked, the block rotates to the specified custom data attribute of that nav item - either 0, 90, 180, or 270 degrees. While I have suc ...

javascriptjquerycssjquery-transit

Customizing the default framework design

Is there a way to modify the default scaffolding using CSS so that both the label and the editor appear on the same line, with the label column having a fixed width? <div class="editor-label"> @Html.LabelFor(model => model.Price) ...

cssasp.net-mvcstyling

"Exploring Angular: A guide to scrolling to the bottom of a page with

I am trying to implement a scroll function that goes all the way to the bottom of a specific section within a div. I have attempted using scrollIntoView, but it only scrolls halfway down the page instead of to the designated section. .ts file @ViewChild(" ...

javascripthtmlangulartypescript

What methods are available for implementing conditional rendering in a React-based Single Page Application (SPA)?

I am in the process of creating my own personal website using ReactJS. I want to ensure that my website, being a Single Page Application, is rendered conditionally. Essentially, I envision the Rendering to display each section on my page at different inter ...

cssreactjsanimation

Could it be that v-show does not function properly on elements that are not dynamic

I'm not experienced in web development and this is my first attempt at using a web framework. The framework I am currently learning is vue.js version 3. My goal: I want to create 4 app instances (nav, defaultApp, bootstrapApp, vueApp). When I select ...

javascripthtmlvue.js

Angular Material Design auto-complete textbox with assertive selection

Presently, I am utilizing Angular Material Design and everything is functioning as expected. However, I am now looking to implement autocomplete (Angular Material Design) in a way that forces the user to always choose an option without the ability to manua ...

javascriptangularjshtmlangular-material

Developing a never-ending marquee effect using CSS that adjusts to different screen sizes

Trying to create an infinite looping marquee that looks good on desktop, but experiences spacing and element disappearance issues on mobile or window adjustments. The code I used can be found here. You can see what I have so far on this CodePen link. < ...

htmlcss

Optimal middle row height for Twitter-Bootstrap grid system

Hello, I go by the name of Shohel Rana. For quite some time now, I've been grappling with a persistent issue that seems to have no clear solution. The crux of the problem is as follows: I have three rows in this setup. The first and third rows sh ...

htmlcsstwitter-bootstrap

How can I create an image link with a hover effect using HTML and CSS?

I've streamlined my code to focus on the issue at hand - I have an image that changes when hovered over, but how can I make it so that clicking on the image redirects you to a specific website? http://pastebin.com/h83yi3e3 Here is the code snippet: ...

htmlcssimagehyperlink

Activate jQuery when a click event occurs to modify the CSS of a specific

I've managed to create 2 buttons labeled SHOW & HIDE, along with a DIV containing some content. My goal is for the first button to expand the width of the content DIV upon clicking, hiding itself in the process and revealing the second button simultan ...

jquerycssjquery-animate

What is the best way to organize a form's checkboxes into an array using Node.js?

My goal is to design a form with multiple checkboxes where each checkbox has the same name, and only the selected values are submitted with the form. While I know how to achieve this using PHP as demonstrated in this SO question, I am facing difficulty imp ...

htmlnode.jsexpress

Tips for organizing nested form rows with Bootstrap 4

I am currently working on a nested form row and I am looking to align the form fields vertically. The current output I am getting is shown below: https://i.sstatic.net/NEWGY.png Here is the code snippet: <link rel="stylesheet" href="https://maxcdn ...

htmlcsstwitter-bootstrapbootstrap-4

A Guide to Connecting a JavaScript File to an HTML Page with Express and Node.js

Struggling with integrating my JavaScript file into my simple NodeJS app. Traditional methods like placing the script in the header doesn't seem to work with Node. I've attempted using sendFile and other approaches, but none have been successful ...

javascripthtmlnode.js

Prevent the afterTagAdded event from being triggered when loading pre-added elements through Ajax using the Tag-it plugin

Here's my dilemma - when I click a button, I load <ul id="members"> <li>member1</li> <li>member2</li> </ul> (the ul is placed inside the .modal-body) via ajax, with pre-existing list elements. After th ...

javascriptjqueryhtmlajax

Adjust column content to fit width, instead of setting width to 100%

To create columns for the ul, I used flex-direction: column and flex-wrap: wrap. When the elements within the ul are split into multiple columns, each column takes on the width of the widest content in that column. However, if there is only one column, it ...

htmlcssflexbox