CODEWITHSUNDEEP
htmlcssangular
Newbie
Newbie

Reputation: 45

Angular: L shape border

First Version: I design my border like this using border 2 borders with numbers as header and measurement at below

The coding is

<div class="meter-block-container">
<div class="chBorder ch3">
      <div class="chTopBar chHL3">
        <label class="ChNumber chHL3">3</label>
      </div>
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>
  <div class="chBorder ch4">
      <div class="chTopBar chHL4">
          <label class="ChNumber chHL4">4</label>
      </div> 
      <div class="measurement">
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            V
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            A
          </div>
          <div class="measurementValue">
            6.000
          </div>
          <div class="measurementUnit">
            W
          </div>
        </div>
  </div>
</div>

.meter-block-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-content: stretch;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  background-color:lightblue;
}

.chBorder {
  height:100%;
  width:100%;
  margin-top:0.1%;
  margin-right:0.1%;
  margin-bottom:0.1%;
  margin-left:0.1%;
  border-radius: 1%;
}
.ch1 {
  border: solid 2px rgb(240, 240, 1);
}
.ch2 {
  border: solid 2px green;
}
.ch3 {
  border: solid 2px blue;
}
.ch4 {
  border: solid 2px purple;
}

.chTopBar{
  border-radius: 1%;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  color:white;
  margin-top:-0.1%;
  margin-right:-0.1%;
  margin-bottom:-0.1%;
  margin-left:-0.1%;
}

.chHL1{
  background-color: rgb(240, 240, 1);
}
.chHL2{
  background-color: green;
}
.chHL3{
  background-color: blue;
}
.chHL4{
  background-color: purple;
}
.measurement{
  background-color: darkblue;
  color: white;
  display: grid;
  grid-template-columns: auto auto;
  margin-top: 2%;
  padding: 1% 0%;
  width: 100%;
}

.measurementValue{
  text-align: right;
  font-size: 70px;
}
.measurementUnit{
  font-size: 70px;
  text-align: left;
  padding-left: 2%;
}

Now, i want to design the border like this which the measurement occupied two columns.

enter image description here

I do not have any idea to design it. I tried to use table to design, but it seems like not what I wanted. The coding is here: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_colspan or

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  padding: 10px;
}
.nobordertop { border-top: none; }
.noborderbottom { border-bottom: none; }
.noborderleft { border-left: none; }
.noborderright { border-right: none; }
</style>
</head>
<body>

<table>
  <tr>
    <td class="noborderbottom">1</td>
    <td>2</td>
  </tr>
  <tr>
    <td class="nobordertop noborderright" >abcdef</td>
    <td class="noborderleft"></td>
  </tr>
</table>

<table>

  <tr style="border-spacing: 0">
    <td rowspan="2">1</td>
    <td>2</td>
  </tr>
  <tr style="border-spacing: 0">
    <td colspan="2">abcdef</td>
  </tr>
</table>

</body>
</html>

Have any better idea to design it?

Upvotes: 0

Views: 173

Answers (2)

Newbie
Newbie

Reputation: 45

From Akber Iqbal answer, I figure it out what i want. Here is my result

  <tr>
    <td class="noborderbottom noborderright">1</td>
    <td class='inset-border '>2</td>
    <td rowspan ="2" style="margin-left: 10px">3</td>
    <td rowspan ="2">4</td>
  </tr>
  <tr>
    <td class="nobordertop" colspan="2">abcdefaaa</td>
  </tr>
</table>

table,
th,
td {
  border: 1px solid black;
  padding: 20px;
  border-spacing: 0;
}

.nobordertop {
  border-top: none;
}

.noborderbottom {
  border-bottom: none;
}

.noborderright {
  border-right: none;
}

.inset-border {
  border: 1px solid red;
  box-shadow: -1px 1px red inset;
  box-shadow: -1px 1px black
}

enter image description here

Upvotes: 0

Akber Iqbal
Akber Iqbal

Reputation: 15031

the 2 options which may get you your intent...

table,
th,
td {
  border: 1px solid black;
  padding: 20px;
  border-spacing: 0;
}

.nobordertop {
  border-top: none;
}

.noborderbottom {
  border-bottom: none;
}

.noborderleft {
  border-left: none;
}

.noborderright {
  border-right: none;
}

.inset-border {
  border: 1px solid red;
  box-shadow: -1px 1px red inset;
}

.inset-border-2 {
  border: none;
  box-shadow: -1px 1px red inset;
}
<table>
  <tr>
    <td class="noborderbottom">1</td>
    <td class='inset-border'>2</td>
  </tr>
  <tr>
    <td class="nobordertop noborderright">abcdef</td>
    <td class="noborderleft"></td>
  </tr>
</table>

<table>
  <tr>
    <td class="noborderbottom">1</td>
    <td class='inset-border-2'>2</td>
  </tr>
  <tr>
    <td class="nobordertop noborderright">abcdef</td>
    <td class="noborderleft"></td>
  </tr>
</table>

Upvotes: 1

Related Questions