After rotating the outer div content of inner div is also rotating. How not to rotate the inner div content if outer div is rotating.

Below is the current output and the code: https://i.stack.imgur.com/iKopZ.png

   .container > div {
      width: 100px;
      height: 50px;
      border-radius: 20px 20px 0 0;
      border: 2px dashed green;
      border-bottom-color: transparent;
    margin-left: -2px;
    float: left;
    }
    
    #test:nth-of-type(2n) {
      transform: rotate(-180deg) !important;
      margin-top: 50px;
    }
    #rotate: nth-child(2n){
      transform:rotate(180deg) !important;
    }
    &:first-child{
      border-left: 0 !important;
      border-top-left-radius: 0 !important;
    }
    &:last-child{
      border-right: 0 !important;
      border-top-right-radius: 0 !important;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.6/angular.min.js"></script>
<div >
      <div id="test" ng-repeat="n in c.testD">
        <div id="rotate">Hello</div>
      </div>
    </div>

CodePudding user response：

Just rotate the inner to counteract.

.container>div {
  width: 100px;
  height: 50px;
  border-radius: 20px 20px 0 0;
  border: 2px dashed green;
  border-bottom-color: transparent;
  margin-left: -2px;
  float: left;
}

#test:nth-of-type(2n) {
  transform: rotate(-180deg) !important;
  margin-top: 50px;
}

#test:nth-of-type(2n) span {
  display: block;
  background: red;
  transform: rotate(-180deg) !important;
}

#rotate: nth-child(2n) {
  transform: rotate(180deg) !important;
}

&:first-child {
  border-left: 0 !important;
  border-top-left-radius: 0 !important;
}

&:last-child {
  border-right: 0 !important;
  border-top-right-radius: 0 !important;
}

<div >
  <div id="test" ng-repeat="n in c.testD">
    <div id="rotate"><span>Hello 1</span></div>
  </div>
  <div id="test" ng-repeat="n in c.testD">
    <div id="rotate"><span>Hello 2</span></div>
  </div>
  <div id="test" ng-repeat="n in c.testD">
    <div id="rotate"><span>Hello 3</span></div>
  </div>
</div>