Can anyone help me to make this logo using CSS?

CodePudding user response：

Check the below answer hope it helps you

* {
  box-sizing: border-box;
}

.container {
  margin: auto;
  background-color: green;
  max-width: 1400px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.rectangle {
    height: auto;
    width: auto;
    border: 4px solid yellow;
    transform: rotate(45deg);
    position: relative;
    text-align: center;
    min-width: 100px;
    min-height: 100px;
}
.rectangle h1 {
   margin: 0;
    line-height: initial;
    color: #fff;
    font-weight: normal;
    font-size: 50px;
    font-family: arial;
    position: relative;
    transform: rotate(-45deg);
    padding: 40px;
}
.rectangle:after {
    content: "";
    position: absolute;
    width: 60px;
    height: 4px;
    background: yellow;
    right: -60px;
    top: 50%;
    margin-top: -2px;
}

.rectangle:before {
    content: "";
    position: absolute;
    width: 60px;
    height: 4px;
    background: yellow;
    left: -60px;
    top: 50%;
    margin-top: -2px;
}
.rectangle .line:before{
    content: "";
    position: absolute;
    height: 60px;
    width: 4px;
    background: yellow;
    top: -60px;
    left: 50%;
    margin-left: -2px;
}
.rectangle .line:after{
    content: "";
    position: absolute;
    height: 60px;
    width: 4px;
    background: yellow;
    bottom: -60px;
    left: 50%;
    margin-left: -2px;
}

  <section class="main-header">
    <div class="container">
      <div class="rectangle">
        <div class="line">
        <h1>M</h1>
      </div>
    </div>
  </section> 

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Here is a one div idea without complex code:

.logo {
  --b:5px; /* adjust this to control the thickness */
  /* control the size */
  width: 50px;
  height: 50px;
  /**/
  font-size: 40px;
  font-family: sans-serif;
  margin: 80px auto;
  position: relative;
  display: grid;
  place-items: center;
}
.logo:before {
  content: "";
  position: absolute;
  inset: -100%;
  transform: rotate(45deg);
  background: 
    linear-gradient(#fff 0 0) center/100% var(--b), 
    linear-gradient(#fff 0 0) center/var(--b) 100%, 
    linear-gradient(#fff 0 0) center/50% 50%;
  background-repeat: no-repeat;
  -webkit-mask: 
    linear-gradient(#fff 0 0) center/calc(50% - 2*var(--b)) calc(50% - 2*var(--b)),
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-repeat: no-repeat;
}
body {
  background: green;
}

<div class="logo">M</div>

<iframe name="sif4" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Another idea:

.logo {
  --b:5px; /* adjust this to control the thickness */
  /* control the size */
  width: 50px;
  height: 50px;
  /**/
  font-size: 40px;
  font-family: sans-serif;
  margin: 80px auto;
  position: relative;
  display: grid;
  place-items: center;
}
.logo:before {
  content: "";
  position: absolute;
  inset: -100%;
  padding:70%;
  transform: rotate(45deg);
  background: 
    linear-gradient(90deg,#fff 25%,#0000 0 75%,#fff 0) 50%/100% var(--b), 
    linear-gradient( 0deg,#fff 25%,#0000 0 75%,#fff 0) 50%/var(--b) 100%,
    conic-gradient(from  90deg at top   var(--b) left   var(--b),#0000 90deg,#fff 0) content-box,
    conic-gradient(from -90deg at bottom var(--b) right var(--b),#0000 90deg,#fff 0) content-box;
  background-repeat: no-repeat;
}
body {
  background: green;
}

<div class="logo">M</div>

<iframe name="sif5" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>