make top border shorter-CodePudding

I have been looking for an answers for the below:

I have two problems:

1. on the below image There are two divs on the left and on the right of the text, to set the bottom and left/right borders is simple, however i couldn't find anywhere how to make the top border shorter. 2. how can i make them float left and right like the below? the div in which they are is set as display flex so float won't work

html below

.divss {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  line-height: 2px;
  background: #bbb;
}

.small {
  font-family: futuraptdemi;
  font-size: 15px;
  letter-spacing: 1.5px;
}

.big {
  font-family: futuraptdemi;
  font-size: 50px;
}

.semisquarel {
  width: 135px;
  height: 135px;
  border-top: white solid 2px;
  border-left: white solid 2px;
  border-bottom: white solid 2px;
  border-right: none;
}

.semisquarer {
  width: 135px;
  height: 135px;
  border-top: white solid 2px;
  border-left: none;
  border-bottom: white solid 2px;
  border-right: white solid 2px;
}

<div >
  <div ></div>
  <img src="images/Path 16.png" width="37px" height="50px"></br>
  <p >BEVERAGES</p>
  <p >PRODUCT</p>
  <p >RUM, WHISKEY, VODKA AND MORE</p>
  <p >RANGE</p>
  <div ></div>
</div>

CodePudding user response：

I played around a bit with your code:

I added an inner_wrapper div (which does not contain the semisquares) and applied display: flex; and justify-content: center to the outer container (.divss) to achieve a horizontal alignment of the semisquares and the text block between them.

Then I applied position:relative to the semisquares and added top and left settings for both in order to be able to position them exactly.

Of course the exact positioning will depend on the used font, the size of the image and other things that I can't know of, but this example might be able to show you a way...

.divss {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #bbb;
  padding: 40px 0;
}
.inner_wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  line-height: 2px;
}
.small {
  font-family: futuraptdemi;
  font-size: 15px;
  letter-spacing: 1.5px;
}

.big {
  font-family: futuraptdemi;
  font-size: 50px;
}
.semisquarel,
.semisquarer {
  position: relative;
  top: 38px;
  width: 135px;
  height: 135px;
  border-top: white solid 2px;
  border-bottom: white solid 2px;
}
.semisquarel {
  border-left: white solid 2px;
  border-right: none;
  left: 20px;
}
.semisquarer {
  border-left: none;
  border-right: white solid 2px;
  left: -20px
}

<div >
  <div ></div>
  <div >
    <img src="images/Path 16.png" width="37px" height="50px"></br>
    <p >BEVERAGES</p>
    <p >PRODUCT</p>
    <p >RUM, WHISKEY, VODKA AND MORE</p>
    <p >RANGE</p>
  </div>
  <div ></div>
</div>

CodePudding user response：

I did some changings on your code. I used position: absolute attribute for .semiquarel and semiquarer classes and aligned items with margin values. For shortening the top border i used ::before after classes. And finally for aligning the letters i put p tags into the letters div

.divss {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  line-height: 2px;
}

.small {
  font-family: futuraptdemi;
  font-size: 15px;
  letter-spacing: 1.5px;
}

.big {
  font-family: futuraptdemi;
  font-size: 50px;
}

.semisquarel {
  position: absolute;
  margin-right: 400px;
  margin-top: 100px;
  width: 135px;
  height: 135px;
  border-left: rgb(8, 8, 8) solid 2px;
  border-bottom: rgb(3, 3, 3) solid 2px;
  border-right: none;
}

.semisquarer {
  margin-top: 100px;
  margin-left: 375px;
  position: absolute;
  width: 135px;
  height: 135px;
  border-left: none;
  border-bottom: rgb(10, 10, 10) solid 2px;
  border-right: rgb(7, 7, 7) solid 2px;
}

.semisquarel::before {
  content: "";
  position: absolute;
  bottom: 133px;
  left: -1px;
  border-top: 2px solid black;
  width: 50%;
}
.semisquarer::before {
  content: "";
  position: absolute;
  bottom: 133px;
  left: 68px;
  border-top: 2px solid black;
  width: 50%;
}

.letters {
  text-align: center;
  margin-top: -7px;
}

.letters .small {
  margin-top: 17px;
}

.letters .big {
  margin-top: 40px;
}

.letters .small2 {
  margin-top: 64px;
}

.letters .big2 {
  margin-top: 61px;
  font-size: 50px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/style.css">
    <title>Document</title>
</head>
<body>
    <div >
        <div ></div>
        <img src="images/Path 16.png" width="37px" height="50px"></br>
        <div >
        <p >BEVERAGES</p>
        <p >PRODUCT</p>
        <p >RUM, WHISKEY, VODKA AND MORE</p>
        <p >RANGE</p>
        </div>
        <div ></div>
      </div>
</body>
</html>

CodePudding user response：

Without changing your HTML, the following was possible which seems to achieve your desired end-results; explanatory comments are in the CSS:

/* defining various custom properties for later use: */
:root {
  --accentColor: hsl(0 100% 100% / 1);
  --fs-large: 50px;
  --fs-small: 15px;
  --imageWidth: 135px;
  --border: 2px solid var(--accentColor);
  --concealedBorder: 0 none transparent;
}

/* a simple (incomplete) reset, to remove default margin
   and padding, and to have all elements sized according
   to the same 'border-box' algorithm, in which the
   stated width includes border-sizes and padding: */
*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.divss {
  background-color: #bbb;
  /* switching to grid layout instead of flex; since we
     clearly have three columns rather than just one: */
  display: grid;
  /* centering all elements within their grid-column */
  justify-items: center;
  /* defining five columns,
     1: one fraction of the remaining available space,
     2: one column equal to the CSS custom property, 
     3: one column to take the elements's (of that column)
        maximum content size,
     4: another column equal to the CSS custom property,
     5: and one further column taking one fraction of the
        remaining space available: */
  grid-template-columns: 1fr var(--imageWidth) max-content var(--imageWidth) 1fr;
  /* using the CSS repeat() function to create five rows, each taking the minimum-
     size of the content within that row: */
  grid-template-rows: repeat(5, min-content);
  /* this is something of a magic number which fits the upper, and lower, edges of
     the .semisquarel and .semisquarer elements lining up as desired: */
  line-height: 2;
  /* I'm using CSS logical properties here; in left-to-right, top-to-bottom languages
     such as English this is equivalent to margin-top */
  margin-block-start: 40px;
  /* logical properties, this is - in English (left-to-right) language - the equivalent
     of margin-left and margin-right; the auto value is used to center the element
     horizontally: */
  margin-inline: auto;
}

/* the :is() pseudo-class function is effectively selecting any element which is either a
   an <img> or <p> within the .divss ancestor, and styling them all; this is shorthand for
   .divss img,
   .divss p {...}
   */
.divss :is(img,p){
  /* we place all matching elements in the center-column of the grid: */
  grid-column: 3;
}

.small {
  /* setting the font-size to the value held in the custom property: */
  font-size: var(--fs-small);
  letter-spacing: 1.5px;
}

.big {
  /* setting the font-size to the value held in the custom property: */
  font-size: var(--fs-large);
}


.semisquarel,
.semisquarer {
  /* setting the aspect ratio to 1, so the image is equally as tall as
     it is wide: */
  aspect-ratio: 1;
  /* setting the size of the inline axis (width, in English, left-to-right)
     to the value held in the custom property: */
  inline-size: var(--imageWidth);
  /* setting the border to the value of the custom property: */
  border: var(--border);
  /* having the element(s) positioned in the third row, and
     spanning all rows until the last: */
  grid-row: 3 / -1;
  /* vertically-centering the element: */
  align-self: center;
}

.semisquarel {
  /* placing the element in the second grid-column: */
  grid-column: 2;
  /* setting the end-border of the inline-axis to
     the value of the custom property: */
  border-inline-end: var(--concealedBorder);
}

.semisquarer {
  grid-column: 4;
  /* setting the start-border of the inline-axis to
     the value of the custom property: */
  border-inline-start: var(--concealedBorder);
}

<div >
  <div ></div>
  <img src="images/Path 16.png" width="37px" height="50px">
  <p >BEVERAGES</p>
  <p >PRODUCT</p>
  <p >RUM, WHISKEY, VODKA AND MORE</p>
  <p >RANGE</p>
  <div ></div>
</div>

JS Fiddle demo.

References: