Include a triangle shape at the top of a div container that has a background image using CSS

Struggling to add a point or triangle shape to my div with a background image, finding it difficult to create enough open space.

This is the desired outcome:

https://i.sstatic.net/LZVaF.png

This is what I have implemented so far:

<div class="bg"></div>

.bg {
  position: relative;
  background: url('http://i.imgur.com/W27LCzB.jpg');
  background-size: cover;
  width: 100%;
  padding-top: 50px;
  height: 200px;
}

.bg:before {
  content:'';
  border-left: 50px solid #fff; 
  border-right: 50px solid #fff; 
  border-bottom: 50px solid transparent; 
  position:absolute; 
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
}

Attempted to follow guidance from this Stack Overflow question, but encountered issues where borders extend from the edges of the rectangular div.

htmlcss

Answer №1

You can achieve your desired design with the help of another div. I hope you find it to your liking :)

.bg {
  position: relative;
  background: url('http://i.imgur.com/W27LCzB.jpg');
  background-size: cover;
  width: 100%;
  padding-top: 50px;
  height: 200px;
}

.bg:before {
  content:'';
  border-left: 50px solid #fff; 
  border-right: 50px solid #fff; 
  border-bottom: 50px solid transparent; 
  position:absolute; 
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 0;
}

.helper {
  position: absolute;
  height: 50px;
  top: 0;
  left: 0;
  right: 0;
}

.helper:before, .helper:after {
  content: "";
  background: white;
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% - 50px);
}

.helper:before {left: 0;}
.helper:after {right: 0;}
<div class="bg">
  <div class="helper"></div>
</div>

Answer №2

To create the desired effect, you can use pseudo elements and skew them to form a unique border shape.

.bg {
  position: relative;
  background: url('http://i.imgur.com/W27LCzB.jpg');
  background-size: cover;
  width: 100%;
  padding-top: 50px;
  height: 200px;
  overflow: hidden;
}

.bg:before {
  content: '';
  background: #fff;
  position: absolute;
  top: 0;
  right: calc(50% + 20px);
  width: 150%;
  height: 50px;
  transform: skewX(-40deg);
}

.bg:after {
  content: '';
  background: #fff;
  position: absolute;
  top: 0%;
  left: calc(50% + 20px);
  width: 150%;
  height: 50px;
  transform: skewX(40deg);
}
<div class="bg"></div>

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

Ways to conceal overflow at the base of a container while enabling the image to break free from the top of the container

Trying to create a visual effect where an image of a person appears to be partially hidden inside a container, with the bottom part concealed by overflow: hidden. However, I want the top part of the image to extend out of the container. Is there a way to a ...

htmlcssclip-pathborder-radius

How to implement jQuery CSS hover effect using jQuery?

I've configured the hover opacity in my CSS, .button-simple:hover { opacity:.70; filter:alpha(opacity=70); filter: "alpha(opacity=70)"; } However, the hover opacity is not displaying after adding this line to my code, $('input[type ...

jquerycssjquery-hoverjquery-1.9

Tips for eliminating the default hover and active states from a textfield in Material UI

Currently, I am in the process of creating a login form and have incorporated Material UI textfields. However, I am facing an issue where the textfield's default hover and active states cannot be removed. Below is my password textfield: (https://i.st ...

cssreactjsmaterial-ui

Specify the database to be created using the select option tag

When utilizing the html form action attribute = "uploadone.php", a form is created with an option element value attribute = 'Red'. This method is used to create multiple databases in this manner. However, adding parameters to the URL becomes cumb ...

phphtml

Ensure that the bottom border of the nav-item is in line with the

Is there a way to make the bottom border of a bootstrap nav item align perfectly with the bottom border of the navbar? My goal is to use the bottom border as an indicator for the selected element. I managed to achieve this with the default height of the na ...

htmlcsstwitter-bootstrapbootstrap-5

The outline none property on the Material UI IconButton is malfunctioning

https://i.sstatic.net/S5zWD.png Attempting to style with CSS as shown in the following example: <CustomColorIconButton> <DeleteForeverIcon /> </CustomColorIconButton> const CustomColorIconButton = withStyles({ root: { c ...

cssreactjsmaterial-ui

Tips for altering the appearance of the material-ui slider thumb design when it is in a disabled state

Through the use of withStyles, I have successfully customized the style of the Slider: const CustomSlider = withStyles(theme => ({ disabled: { color: theme.palette.primary.main }, thumb: { height: 24, width: 24, }, }))(Slider); How ...

javascripthtmlcssreactjsmaterial-ui

Overflow error in Rsuite table row cannot be displayed

Please see the image above Take a look at my picture. I am facing a similar issue. I am struggling to display my error tooltip over my table row. Has anyone else encountered this problem before? Any suggestions for me? I have attempted to set the overflow ...

cssreactjsrsuite

Display temporary image until real image loads within ng-repeat angularjs

I am looking to display a placeholder image while the actual image is being loaded. I have tried using the ng-image-appear plugin. The issue I'm facing is that the placeholder image does not appear for img elements inside ng-repeat, although it works ...

javascripthtmlangularjsimage

Hide a header and bring it back after a 2-second delay

I REPLIED BELOW Is there a way to make the header of my webpage fade out when scrolled and then be hidden using style.display? Here's what I have so far: <script type="text/javascript> function Scroll() { var head = document.getEl ...

javascripthtmlcss

When the content in the div exceeds its boundaries, it causes it to overlap with

In my design, I have a top menu with a z-index of 999 to ensure nothing covers it. However, I am facing an issue where a scrolling div is appearing on top of the menu bar even though it shouldn't. Any idea why this is happening? Here is the CSS for t ...

htmlcsspositionoverflow

Modify the appearance of HTML dialog box using CSS styling

Currently, I am working on a Java Spring project that includes a single CSS file consisting of around 1500 rows. Recently, I was tasked with adding a dialog box to one of the screens in the project. The issue I encountered is that the style of the dialog b ...

javajquerycssstylesdialog

Resizing the Logo as You Scroll

I need my logo to shrink when I activate the slideshow, similar to what is shown in the image. https://i.sstatic.net/WhobD.jpg However, I'm struggling to get the jQuery code to work. Can someone please demonstrate how I can shrink a logo, like the o ...

jqueryhtmlcss

Changes in browser size will not affect the height

Is there a way to smoothly change the height of the navigation bar when resizing the browser? Currently, it snaps to the new height when the width goes below or above 1000px. Any suggestions? nav.cust-navbar { -webkit-transition: height 2s; tran ...

htmlcssmedia-queries

Ways to repair the mouse hover transform scale effect (animation included)

I am currently facing an issue with my GridView that contains images. When I hover over the top of the image, it displays correctly, but when I move to the bottom, it does not show up. After some investigation, I suspect that there may be an overlay being ...

javascriptjqueryasp.netcss

Performing calculations on PHP and MySQL data within an HTML table, enabling precise percentage

Here's the code I'm currently working with: <td> <?php echo $row['feild1'] + $row['feild2'] + $row['feild3'] + $row['feild4'] + $row['feild5'] + $row['feild6'] + $row[' ...

phphtmlmysql

Steps for using the ModelName.objects.filter method in HTML

I'm looking to streamline the amount of code needed in my view and aiming to achieve this directly in my HTML file: {% for committee in c %} {% for article in Article.objects.filter(committee=committee) %} <a class="post-link" hre ...

htmldjangodjango-models

Issue with text input field causing the Enter key to not create a new line

In the example above, the text is placed in the middle of the text area. Here is the CSS code : .form-control { height: 300px; display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-heig ...

javascriptcssreactjs

Align your content in the center of any browser

My CSS code is currently only centering on a certain type of screen, but I want it to be centered on any screen. Here is the CSS code: @import url(http://fonts.googleapis.com/css?family=Roboto+Condensed); html{ font-family: "HelveticaNeue-Light" ...

htmlcss

Altering the hue of various stroke patterns

I've encountered an issue where I want to create skill bars that display my skills in percentages. Luckily, I found a great code that allows me to do this. Although I would prefer to do it myself, I haven't come across a good tutorial that teache ...

javascripthtmlcss